jquery-ajax完整写法
form表单
$('#submit').click(function(){
$('#form').serialize(); //会根据input里面的name,把数据序列化成字符串;eg:name=yang
$('#form').serializeArray(); //会根据input里面的name,把数据序列化成数组;eg:[object]
//注意:没有name会获取不到值 //下面原生js的方法
JSON.parse() //json字符串转化为json对象
JSON.stringify() //json对象转化为json字符串
});
jq-完整ajax
$.ajax({
url:'/comm/test1.php',
type:'POST', //GET
async:true, //或false,是否异步
data:{
name:'yang',age:25
},
timeout:5000, //超时时间
dataType:'json', //返回的数据格式:json/xml/html/script/jsonp/text
beforeSend:function(xhr){
console.log(xhr)
console.log('发送前')
},
success:function(data,textStatus,jqXHR){
console.log(data)
console.log(textStatus)
console.log(jqXHR)
},
error:function(xhr,textStatus){
console.log('错误')
console.log(xhr)
console.log(textStatus)
},
complete:function(){
console.log('结束')
}
})
原生js-ajax
$('#send').click(function(){
//请求的5个阶段,对应readyState的值
//0: 未初始化,send方法未调用;
//1: 正在发送请求,send方法已调用;
//2: 请求发送完毕,send方法执行完毕;
//3: 正在解析响应内容;
//4: 响应内容解析完毕; var data = 'name=yang';
var xhr = new XMLHttpRequest(); //创建一个ajax对象
xhr.onreadystatechange = function(event){ //对ajax对象进行监听
if(xhr.readyState == 4){ //4表示解析完毕
if(xhr.status == 200){ //200为正常返回
console.log(xhr)
}
}
};
xhr.open('POST','url',true); //建立连接,参数一:发送方式,二:请求地址,三:是否异步,true为异步
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded'); //可有可无
xhr.send(data); //发送
});
jq实际应用
$(function(){
$('#btn').click(function(){
var obj = $(this);
//has_click 防止重复多次点击
var has_click = obj.attr('has-click');
if(has_click == '1'){
return;
}
obj.attr('has-click','1');
var url = '';
var content = '';
$.ajax({
type:'post',
url:url,
dataType:'json',
data:{content:content},
beforeSend:function(){
obj.html('正在处理...');
},success:function(json){
if(json.code == '1'){
//成功
}else{
//出错
obj.html('操作按钮').attr('has-click','0');
}
}
});
});
});
jquery-ajax完整写法的更多相关文章
- jQuery ajax 标准写法及进度条绘制
jQuery ajax 标准写法及进度条绘制 $.ajax({ url: "http://www.microsoft.com", //请求的url地址 dataType: &quo ...
- jquery ajax分页写法
jquery ajax分页写法我用的是laypage插件 前端代码<pre> function demo(curr) { $.getJSON('/home/index/getinfo', ...
- jquery ajax标准写法
$.ajax({ url:url, //地址 type:'post', //请求方式 还可以是get type不可写成Type 不让会导致数据发送不过去,使用 ...
- Jquery ajax 完整实例子1
$ajax请求--------------------------------- var $personWifePs=$("#wife-money tbody tr"); var ...
- jquery ajax 标准写法
$.ajax({ url:"http://www.microsoft.com", //请求的url地址 dataType:"json", //返回格式为json ...
- jquery ajax thinkphp异步局部刷新完整流程
环境:ThinkPHP3.2.3,jQuery3.2 前言: 在一般的网站中,都需要用到jquery或者其他框架(比如angular)来处理前后端数据交互,thinkphp在后台也内置了一些函数用 ...
- JQuery $.ajax(); 异步访问完整参数
$.ajax 完整参数 jquery中的ajax方法参数 url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post ...
- JQuery+Ajax+Struts2+Hibernate 实现完整的登录注册
写在最前: 下午有招聘会,不想去,总觉得没有准备好,而且都是一些不对口的公司,可是又静不下心来,就来写个博客. 最近在仿造一个书城的网站:http://www.yousuu.com ,UI直接拿来用, ...
- jQuery Address全站 AJAX 完整案例详解
本文详细介绍如何利用 jQuery 框架以及 jQuery Address 插件实现最基本的全站 AJAX 动态加载页面内容的功能的方法. 案例目标 以常见基本结构的网站为案例,实现全站链接 AJAX ...
- Jquery ajax 学习笔记
本人的js & jq 一直是菜鸟级别,最近不忙就看了看ajax方面的知识,文中部分内容参考自这里&这里 之前一直用js写ajax现在基于jq实现方便多了~ $.get & $. ...
随机推荐
- 浅谈MySQL数据类型
MySQL 数据类型 MySQL中定义数据字段的类型对你数据库的优化是非常重要的. MySQL支持多种类型,大致可以分为三类:数值.日期/时间和字符串(字符)类型. 一.数值类型 MySQL支持所有标 ...
- LINQ教程
在说LINQ之前必须先说说几个重要的C#语言特性 一:与LINQ有关的语言特性 1.隐式类型 (1)源起 在隐式类型出现之前, 我们在声明一个变量的时候, 总是要为一个变量指定他的类型 甚至在fore ...
- Xcode 运行cocos2dx弹出内部错误对话框(Internal Error)
cocos2dx未捕获的异常升高.选择"继续"继续运行在一个不一致的状态.选择"崩溃"停止应用和崩溃报告一个错误文件. 莫名其妙,代码没有报错,运行时却弹出(内 ...
- 搜索引擎Solr系列(二): Solr6.2.1 从MySql中导入数据
一:建立MySql测试表,如下图: 二:solr导入配置: 1.新建demo core文件夹,并修改managed-schema里面的配置文件建立索引字段: 2.把mysql-connector-j ...
- ubuntu安装使用GitHub--PC端
按照这个步骤安装并且初步使用 按照这个程序配置git的ssh,在git push时不用输入密码
- Hadoop基础知识
摘要:Hadoop的安装目录了解.etc的核心配置项.hadoop的启动.HDFS文件的block块级副本的存放策略.checkpoint触发设置. 1.hadoop目录了解 bin:可执行文件,命令 ...
- Linux Bond的原理及其不足
http://www.tektea.com/archives/1969.html. 在企业及电信Linux服务器环境上,网络配置都会使用Bonding技术做网口硬件层面的冗余,防止单个网口应用的单点故 ...
- ubuntu配置tftp服务
ubuntu配置TFTP服务: TFTP是用来下载远程文件的最简单的网络协议,基于UDP协议.xinetd是新一代的网络守护进程服务程序,经常用于管理多种轻量型internet服务. sudo apt ...
- WebAPI使用多个xml文件生成帮助文档
一.前言 上篇有提到在WebAPI项目内,通过在Nuget里安装(Microsoft.AspNet.WebApi.HelpPage)可以根据注释生成帮助文档,查看代码实现会发现是基于解析项目生成的xm ...
- 关于ES6的 模块功能 Module 中export import的用法和注意之处
export default 的用法 export default命令用于指定模块的默认输出.显然,一个模块只能有一个默认输出,因此export deault命令只能使用一次.所以,import命令后 ...