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)

}

}

})

})

$.ajax()

语法二：$.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}));

}

})

$.get()

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

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

Struts2框架(3)---Action类的3种书写方式

Action类的3种书写方式 本文主要写有关写Action类的3种书写方式: (1)第一种 Action可以是POJO (简单模型对象)  不需要继承任何父类 也不需要实现任何接口 (2)实现Acti ...

jQuery中的Ajax几种请求方式

1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. url (String) : 请求的HTML页的URL地址. data (M ...

ajax 几种提交方式

方式一: $.ajax({ type: 'POST', url: "/user/editPwd.htm", data: {"oldPassword":oldPa ...

[jquery-ajax] jquery ajax 三种情况对比

async:false

css的四种书写方式

优先级: 外部样式 < 内部样式表 < 内联样式表: 优先级,即:同名的选择器右边的会覆盖左边 1.内部样式表

ajax两种不同方式的不同结果

function upLoadAlterData(){ $("#form_main").ajaxSubmit({ url:"XX", cache:false, ...

css的三种书写方式

一.内联样式

This is a paragraph

二 ...

JavaScript权威设计--jQuery&comma;Ajax&period;animate&comma;SVG&lpar;简要学习笔记二十&rpar;&lbrack;完结篇&rsqb;

1.$和jquery在全局命名空间中定义的唯一两个变量.   2.jquery是工厂函数,不是构造函数.他返回一个新创建的对象.   3.jquery的四种调用方式:     <1>传递C ...

mvc数组绑定-jquery ajax

var list=[];//数组 list[0]=1001; list[1]=1002; list[1]=1003; var json_data = { selected: list}; $.ajax ...

随机推荐

Spring JMS ActiveMQ整合(转)

转载自:http://my.oschina.net/xiaoxishan/blog/381209#comment-list ActiveMQ学习笔记(四)http://my.oschina.net/x ...

CSS &colon;hover伪类选择定义和用法

伪类选择符E:hover的定义和用法: 设置元素在其鼠标悬停时的样式.E元素可以通过其他选择器进行选择,比如使用类选择符.id选择符.类型选择符等等.特别说明:IE6并非不支持此选择符,但能够支持a元 ...

Yarn中的几种状态机

1 概述 为了增大并发性,Yarn采用事件驱动的并发模型,将各种处理逻辑抽象成事件和调度器,将事件的处理过程用状态机表示.什么是状态机? 如果一个对象,其构成为若干个状态,以及触发这些状态发生相互转移 ...

【转载】使用Axure制作App原型怎样设置尺寸？

使用Axure制作App原型怎样设置尺寸? 原文地址:http://www.axure.us/2172/ 本文由原型库网站投稿,转载请注明出处. 最近有几位小伙伴儿都提出同样一个疑问:想用Axure设 ...

MVC验证13-2个属性至少输入一项

原文:MVC验证13-2个属性至少输入一项 有时候,我们希望2个属性中,至少有一个是必填,比如: using Car.Test.Portal.Extension;   namespace Car.Te ...

javascript&colon; 字符串拼接有问题

点击某个链接,出现js错误:Uncaught SyntaxError: Unexpected token ILLEGAL 原因: $str .= sprintf('&nbsp&nbsp ...

2018 CCPC网络赛 hdu6444 Neko&&num;39&semi;s loop

题目描述: Neko has a loop of size n.The loop has a happy value ai on the i−th(0≤i≤n−1) grid. Neko likes ...

实验1 C语言开发环境使用和数据类型、运算符、表达式

♦ 实验结论 PART 1 验证性内容 问题: 1.结尾没有加“:”时回车到下一行的时候再输入下一行的语言首字对齐方式会发生变化,可以对上一行进行检查. (这一点需要在不同软件里面试一下,在机房里的软 ...

【译】Spark调优

原文地址:http://spark.incubator.apache.org/docs/0.7.3/tuning.html 译文地址:http://www.oschina.net/translate/ ...

ORACLE中查询语句的执行顺及where部分条件执行顺序测试

Oracle中的一些查询语句及其执行顺序 原文地址:https://www.cnblogs.com/likeju/p/5039115.html 查询条件: 1)LIKE:模糊查询,需要借助两个通配符, ...