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

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

jquery ajax几种书写方式的总结的更多相关文章

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

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

  2. jQuery中的Ajax几种请求方式

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

  3. ajax 几种提交方式

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

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

    <button class="btn1">async:false</button> <button class="btn2"> ...

  5. css的四种书写方式

    优先级: 外部样式 < 内部样式表 < 内联样式表: 优先级,即:同名的选择器右边的会覆盖左边 1.内部样式表 <head> <style> /*内部样式表,一般用 ...

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

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

  7. css的三种书写方式

    一.内联样式 <p style="color: sienna; margin-left: 20px"> This is a paragraph </p> 二 ...

  8. JavaScript权威设计--jQuery,Ajax.animate,SVG(简要学习笔记二十)[完结篇]

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

  9. mvc数组绑定-jquery ajax

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

随机推荐

  1. 如何在linux下使用git管理上传代码&误删文件修复

    首先需要安装git,sudo apt-get install git,这时就可以下载代码了. 然后先在gituhub上新建一个仓库,然后先在本地建一个git目录,git init 然后再配置用户名和邮 ...

  2. Java HashMap 使用了未经检查或不安全的操作

    今天在做接口测试的时候使用了Java中的Map(java 所知胜少,因项目需要提供示例),不扯犊子了,我们直接看一个代码文件名:Test.java: import java.util.ArrayLis ...

  3. Java开发笔记(八十六)通过缓冲区读写文件

    前面介绍了利用文件写入器和文件读取器来读写文件,因为FileWriter与FileReader读写的数据以字符为单位,所以这种读写文件的方式被称作“字符流I/O”,其中字母I代表输入Input,字母O ...

  4. Linux运维第二课----Linux发展史、环境准备

    一.Linux的发展 1.1969年在贝尔实验室诞生Unix,是开源免费的,之后逐渐转变为收费系统. 2.1986年谭邦宁研发mini Unix,但主要用来教学. 3.斯托曼创建FSF(自由软件基金会 ...

  5. mysql生成日期的辅助表

    为了解决mysql按日期分组查询统计的时候,没有数据补0.可以生成连续的时间表格来辅助查询* 生成按天的数据 * 每一个小时为一个分段 生成如下辅助表 *代码如下 CREATE TABLE num ( ...

  6. SharePoint中你不知道的图片库(实战)

    分享人:广州华软 无名 一. 前言 以前,在门户网站放一个图片幻灯片时,除了要自己开发实现外,还需要处理上传图片的大小,但在SharePoint中,使用图片库,无需花费时间和精力,就能马上实现. 二. ...

  7. Odoo 开源微信小程序商城模块

    详见:http://oejia.net/blog/2018/09/13/oejia_weshop_about.html oejia_weshop Odoo 微信小程序商城模块 oejia_weshop ...

  8. 荣耀7.0系统手机最简单激活Xposed框架的步骤

    对于喜欢玩手机的小伙伴来说,很多时候会使用到Xposed框架及各类功能彪悍的模块,对于5.0以下的系统版本,只要手机能获得Root权限,安装和激活Xposed框架是比较简便的,但随着系统版本的不断更新 ...

  9. 【Linux】【MySQL】CentOS7、MySQL8.0.13 骚操作速查笔记——专治各种忘词水土不服

    1.前言 [Linux][MySQL]CentOS7安装最新版MySQL8.0.13(最新版MySQL从安装到运行) 专治各种忘词,各种水土不服. - -,就是一个健忘贵的速查表:(当然不包括SQL的 ...

  10. gitlab+jenkins自动发布Python包到私有仓储

    背景 有个私有仓储,地址为https://your.repo.com/pypi/ 代码存储在gitlab, 地址为https://gitlab.company.com/software.git CI为 ...