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 方法不会缓存数据,并且常用于连同请求一起发送数据。

实际应用中多用到语法一 语法二, 语法三较少

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例

JQuery发送ajax请求时中文乱码问题解决

jQuery实现form表单基于ajax无刷新提交方法实例代码

php+jQuery ajax实现的实时刷新显示数据功能示例

jQuery+ajax实现批量删除功能完整示例

jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】

jquery实现Ajax请求的几种常见方式总结

PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值