ajax可以发送post或者get请求,并且可以设置同步或者异步,这里罗列了几种。其中,后台处理请求由servlet实现。
第一种方式:
- @H_403_19@var@H_403_19@xmlhttp=new@H_403_19@XMLHttpRequest();
- @H_403_19@//发送post请求,false表示发送同步请求@H_403_19@
- @H_403_19@xmlhttp.open("POST"@H_403_19@,"AdminLogin"@H_403_19@,false@H_403_19@);
- @H_403_19@//设置文件的头,UTF-8应与html编码格式一致,告诉浏览器对参数编码的格式,可以解决中文传输乱码的问题@H_403_19@
- @H_403_19@xmlhttp.setRequestHeader("Content-type"@H_403_19@,"application/x-www-form-urlencoded;charset=UTF-8"@H_403_19@);
- @H_403_19@//设置传递的参数@H_403_19@
- @H_403_19@xmlhttp.send("id="@H_403_19@+id+"&password="@H_403_19@+password);
- @H_403_19@//显示返回结果@H_403_19@
- @H_403_19@alert(xmlhttp.responseText);
第二种方式(接受JSON包):
- @H_403_19@//使用ajax方法,JS代码@H_403_19@
- @H_403_19@$.ajax({
- @H_403_19@url:"GetStudentInfo"@H_403_19@,
- @H_403_19@type:'POST'@H_403_19@,
- @H_403_19@async:false@H_403_19@,
- @H_403_19@contentType:'application/json'@H_403_19@,
- @H_403_19@mimeType:'application/json'@H_403_19@,
- @H_403_19@success:function@H_403_19@(data){//对返回值的处理@H_403_19@
- @H_403_19@$("#id"@H_403_19@).val(data.id);
- @H_403_19@$("#name"@H_403_19@).val(data.name);
- @H_403_19@$("#year"@H_403_19@).val(data.year);
- @H_403_19@$("#specialty"@H_403_19@).val(data.specialty);
- @H_403_19@$("#phone"@H_403_19@).val(data.phone);
- @H_403_19@$("#email"@H_403_19@).val(data.email);
- @H_403_19@},
- @H_403_19@});
- @H_403_19@//Servlet代码@H_403_19@
- @H_403_19@public@H_403_19@class@H_403_19@User{
- @H_403_19@public@H_403_19@Stringid;
- @H_403_19@public@H_403_19@Stringname;
- @H_403_19@public@H_403_19@Stringyear;
- @H_403_19@public@H_403_19@Stringspecialty;
- @H_403_19@public@H_403_19@Stringphone;
- @H_403_19@public@H_403_19@Stringemail;
- @H_403_19@}
- @H_403_19@
- @H_403_19@protected@H_403_19@void@H_403_19@doPost(HttpServletRequestrequest,HttpServletResponseresponse)
- @H_403_19@throws@H_403_19@ServletException,IOException{
- @H_403_19@ObjectMappermapper=new@H_403_19@ObjectMapper();
- @H_403_19@Connectioncon=DBTool.getConnection();
- @H_403_19@Useru=new@H_403_19@User();
- @H_403_19@u.id="a"@H_403_19@;
- @H_403_19@u.name="b"@H_403_19@;
- @H_403_19@u.year="c"@H_403_19@;
- @H_403_19@u.specialty="d"@H_403_19@;
- @H_403_19@u.phone="e"@H_403_19@;
- @H_403_19@u.email="f"@H_403_19@;
- @H_403_19@response.setContentType("application/json"@H_403_19@);
- @H_403_19@}
第三种方式(接受JSON包,返回值为集合):
- @H_403_19@//JS代码@H_403_19@
- @H_403_19@$.ajax({
- @H_403_19@url:"CheckAllStudent"@H_403_19@,
- @H_403_19@contentType:'application/json'@H_403_19@,
- @H_403_19@mimeType:'application/json'@H_403_19@,
- @H_403_19@success:function@H_403_19@(data){
- @H_403_19@$.each(data,function@H_403_19@(index,student){
- @H_403_19@var@H_403_19@string="<tr>"@H_403_19@;
- @H_403_19@string+="<td>"@H_403_19@+student.id+"</td>"@H_403_19@;
- @H_403_19@string+="<td>"@H_403_19@+student.name+"</td>"@H_403_19@;
- @H_403_19@string+="<td>"@H_403_19@+student.year+"</td>"@H_403_19@;
- @H_403_19@string+="<td>"@H_403_19@+student.specialty+"</td>"@H_403_19@;
- @H_403_19@string+="<td>"@H_403_19@+student.phone+"</td>"@H_403_19@;
- @H_403_19@string+="<td>"@H_403_19@+student.email+"</td>"@H_403_19@;
- @H_403_19@$("tbody"@H_403_19@).append(string);
- @H_403_19@});
- @H_403_19@},
- @H_403_19@});
- @H_403_19@//Servlet代码@H_403_19@
- @H_403_19@protected@H_403_19@void@H_403_19@doPost(HttpServletRequestrequest,HttpServletResponseresponse)
- @H_403_19@throws@H_403_19@ServletException,IOException{
- @H_403_19@ObjectMappermapper=new@H_403_19@ObjectMapper();
- @H_403_19@//把相同的对象放入List中@H_403_19@
- @H_403_19@List<User>list=new@H_403_19@ArrayList<User>();
- @H_403_19@Useru1,u2,u3;
- @H_403_19@list.add(u1);
- @H_403_19@list.add(u2);
- @H_403_19@list.add(u3);
- @H_403_19@response.setContentType("application/json"@H_403_19@);
- @H_403_19@mapper.writeValue(response.getOutputStream(),list);
- @H_403_19@}
第四种方式(ajax方法,带参数):
参考文献: