ajax请求适应有较少内容的请求实现，例如查询明细，保存明细，如果是大量的数据查询用ajax实现成本较高，最好用form表单提交。

1.用ajax实现查询表单

   1.1js

jQuery("#userQuery").bind("click", function () {
        var a = {
            name:name,
			numer:number
        };
        jQuery.ajax({
            type: "POST",
            url: "/rest/student/list",
            data: JSON.stringify(a),
            dataType: 'json',
            contentType: 'application/json',
            processData: false,
            cache: false,
            success: function (data) {
                if (data.success&&data.list!=null&&data.list!="") {
                        var studentHtml="";
                        var temp=data.list;
                        for (x in data.list) {
                            //遍历JSON格式的数组取元素, x代表下标
                            studentHtml+='<tr><td>'+temp[x].name+'</td>'+        '<td>'+temp[x].number+'</td>'+ '<td>'+temp[x].age+'</td>';
                        }

                    $("#userQuery").html(studentHtml);
                } else {
                    alert(data.msg);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                  alert("服务器忙，请稍后再试");
            }
        });
    });

1.2.后端controller

   

@Controller
@RequestMapping("/student")
public class StudentController extends BaseControl{

     @Autowired
    StudentService studentService;
    
    private static final Logger logger= LoggerFactory.getLogger(StudentController.class);
    @RequestMapping("/list")
    @ResponseBody
    public String list(@ModelAttribute Student student,Model view){
        Map<String,Object> map=new HashMap<String,Object>(16);
        try {
            StudentQuery query = new StudentQuery();
            query.setName(student.getName());
            query.setNumber(student.getNumber);
            List<Student> students= studentService.search(query);
            map.put("list", students);
            map.put("success",true);
        } catch (Exception e) {
            logger.error("search student error", e);
        }
        Gson gson=new Gson();
        return gson.toJson(map);
    }
}

   1.3 ajax的参数解析

参数名称

类型

说明

举例

url

String

发送请求的地址

 

data

object类型

或String类型

object类型是key-value键值对

object类型：{name:"name",numer:"number"}

String类型：JSON.stringify(a)

type

String

请求方式post或get

"post"

dataType

String

字符串类型

指ajax执行完成返回值的类型

xml：返回XML文档

html：返回纯文本HTML信息，包含的script标签会在插入DOM时执行

script：返回纯文本的JavaScript代码。

json:返回json数据。

jsonp：JSONP格式

text：返回纯文本字符串

 

contentType

ajax输入参数

的类型，与

dataType相对应

1."application/x-www-form-urlencoded" (默认值)，默认值可以设置contentType: false；默认值可以适合大部分的场合

2."application/json; charset=utf-8"  要求data必须是字符串：JSON.stringify(a)

3.当data为json格式{name:"name",numer:"number"},设置contentType: false

 

 

 

async

Boolean

true(默认），是异步请求。false，是同步请求。异步请求就是说当ajax发送请求后，在等待server端返回的这个过程中，前台会继续执行ajax块后面的脚本，直到server端返回正确的结果才会去执行success，也就是说这时候执行的是两个线程，ajax块发出请求后一个线程和ajax块后面的脚本（另一个线程).同步请求在请求在请求发送出去会锁住浏览器，用户其他操作必须等待请求完成才可以执行。异步中，在ajax块内部是同步的，例如success内的代码是顺序执行的。

注意：跨域请求和dataType:"jsonp"请求不支持同步操作。

 

cache

Boolean

1.默认为true；指在第一次请求完成之后，如果地址和参数不变化，第二次去请求，会默认获取缓存中的数据，不去读取服务器端的最新数据。只对type为get的时候可能会使用。

2.设置为false；每次读取的是最新的数据，不从缓存理读取。

 type:"post",每次提交的内容都不一样，所以cache:false

 

success

Function

请求成功后的回调函数，这个函数传递数据，并根据dataType解析数据，解析出的数据包括请求返回的状态及数据。

success: function (data) {
                if (data.success&&data.list!=null&&data.list!="") {
                        var studentHtml="";
                        var temp=data.list;
                        for (x in data.list) {
                            //遍历JSON格式的数组取元素, x代表下标
                            studentHtml+='<tr><td>'+temp[x].name+'</td>'+        '<td>'+temp[x].number+'</td>'+ '<td>'+temp[x].age+'</td>';
                        }

                    $("#userQuery").html(studentHtml);
                } else {
                    alert(data.msg);
                }
            }

error

Function

失败的时候调用函数有3个参数，即XMLHttpRequest对象,错误信息和捕获错误的对象（可选）

error: function (XMLHttpRequest, textStatus, errorThrown) {
                  alert("服务器忙，请稍后再试");
            }