如何使用 jQuery 的 Ajax 技术编写代码
|
这篇文章给大家分享的是“jQuery Ajax书写语法及代码是怎样的？”，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下吧。 Ajax在前端的应用极其广泛，因此，我们有必要对其进行总结，以方便后期的使用。 AJAX优点： 可以异步请求服务器的数据，实现页面数据的实时动态加载， 在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。 jquery在全局对象jquery（也就是$）绑定了ajax()函数，可以处理Ajax请求，ajax常用的配置选项有： async 是否异步执行，默认为True,千万不要指定为False。 method 发送的Method,缺省为“GET”,可指定为‘POST','PUT','DELETE', 单词字母必须大写。 contentType 发送POST请求的格式，默认值为'application/x-www-form-urlencoded; charset=UTF-8'，也可以指定为‘text/plain' 'application/json'。 data 发送给后端的数据，可以是字符串、数组或对象。如果是GET请求，data将被转换成query附加到url上；如果是POST请求，根据contentType把data序列化成合适的格式 dataType 接收的数据格式，可以指定为'html' 'xml' 'json' 'text'等，缺省情况下根据响应的Content-Type猜测。 headers 发送的额外的HTTP请求头，必须是一个Object 语法一：$.ajax({name:value, name:value, ...}) # 登录js代码 $(".form-login").submit(function (e) { e.preventDefault(); mobile = $("#mobile").val(); pwd = $("#password").val(); var data = { mobile: mobile, pwd: pwd }; $.ajax({ url: "/api/***", type: "POST", data: JSON.stringify(data), contentType: "application/json", dataType: "json", headers: {"X-CSRFToken": getCookie('csrf_token')}, success: function (resp) { if (resp.error == 0){ // resp 是后端通过json.dumps()返回的json格式数据:res={"error":0, "errmsg":"登录失败"} // resp = json.dumps(res) // 请求成功，跳转页面 location.href = '/' } else { alert(resp.errmsg) } } }) }) 语法二：$.get(URL, params, function(resp, status_code){}) URL必需参数； params可选参数，params={key:value...}, 会以?key=value&key=value...的方式自动添加到URL后面 function(resp, status_code) 可选参数，是请求成功后所执行的函数，resp是后台返回的数据； states_code是自动生成的响应状态码，可缺省 # 更新首页房源展示信息 var params = { aid: 0, sd: "2018-2-20", ed: "2019-2-29", page: 1 }; $.get("/api/v1_0/houses", params, function(resp){ if (resp.error == 0){ $(".house-list").html(template("house-list-tmpl", {houses:resp.data.houses})); } else { $(".house-list").append(template("house-list-tmpl", {houses: resp.data.houses})); } }) 语法三：$.post(URL, data, function(resp, states_code){}) URL必选参数； data 可选参数 连同请求发送的数据； function(resp, status_code) 可选参数，是请求成功后所执行的函数，resp是后台返回的数据； states_code是自动生成的响应状态码，可缺省 $("button").click(function(){ $.post("/try/ajax/demo_test_post.php", { name:"mjy", url:"https://cnblogs.com/We612/" }, function(data,status){ alert("数据: \n" + data + "\n状态: " + status); }); }); 说明： $.GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。 $.POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。 实际应用中多用到语法一 语法二， 语法三较少。 （编辑：银川站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
