jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据,表单序列化(异步获取表单内容)

jQuery中使用ajax:

在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中;市面上有多个版本的jQuery库,这里到官网:https://jquery.com/download/随意找个比较老的版本即可,后面学完node可以使用npm更方便地下载到具体的版本,这里就不做过多强调了;下载完后要找到文件:jquery-1.12.4.zip\jquery-1.12.4\dist - 这个位置的文件就是要引入项目的文件,解压大小为 2.3 MB左右,其用法如下:

	//1.脚本之前引入jQuery文件:<script src="jquery.min.js"></script>//2.$ajax()是jQuery的ajax API,最基础的可以传两个参数,参数一为URL地址;参数二为对象;习惯传入一个对象作为参数,URL地址可以在这个对象中设置:$.ajax('time.php', {type: 'post', //提交方式,当为post时请求是通过请求体传递,当为get时,请求是通过URL传递success: function(result) { //请求成功后的回调函数,里面的参数是响应体console.log(result);};});$.ajax({url: 'time.php',type: 'get',data: {//data给服务端传递参数,后面跟一个对象。id: 1,name: 'kuhai',age: 18}, dataType: 'json', //当服务端没有设置Content-Type: application/json时,可以通过dataType:'json'设置响应体数据的类型。//如果data接收formData二进制数据,那么需要加依稀两个属性:contentType:false,processData:false,//解决二进制数据结束success: function(result) {console.log(result);/result会根据服务端设置的header('Content-Type: application/json')做出对应的响应,而原生的是不会根据服务端做出对应的响应,jQuery特有的。}});

jQuery中ajax的基本使用方法:

	<script>$.ajax({url: 'time.php',type: 'get',beforeSend: function(xhr) {// 在所有发送请求的操作(open, send)之前执行console.log('beforeSend');},success: function(res) {//只有请求成功(状态码为200)才会执行这个函数console.log('success')},error: function(err) {//只有请求不正常(状态码不为200)才会执行console.log('error')},complete: function(com) {// 不管是成功还是失败都会执行这个 complete 函数console.log('complete')}});</script>

jQuery中ajax快捷操作:

	<script>// 以get的方式请求:$.get('time.php', {id: 1,name: 'ming'}, function(result) {console.log(result);});// 以post的方式请求:$.post('json.php', {age: 18}, function(res) {console.log(res);});// 以json数据格式的方式请求:Request Method默认值: GET$.getJSON('json.php', {gender: 1}, function(sex) {console.log(sex);});</script>

jQuery中ajax全局事件:

jQuery中全局事件指:ajaxStart和ajaxStop事件,只要有ajax发生或结束就会执行此事件,常用于做加载进度条效果:(nprogress是一个做进度条的插件,有兴趣的话可以到官方文档学习)

	<script>$(document).ajaxStart(function() {// 只要有 ajax 请求发生就会执行此函数,函数中可以设计多种逻辑代码}).ajaxStop(function() {//注意这里为链式调用// 只要有 ajax 请求结束就会执行此函数,函数中可以设计多种逻辑代码})})</script>

jQuery中不刷新页面实现局部加载:

jQuery中load(url,data,function(response,status,xhr))方法是使用ajax对数据加载,URL是数据接口地址,data是请求时向服务器发送的数据,function是请求完成时执行的函数(response请求的结果,status请求状态,XMLHttpRequest对象);此方法只传入页面的URL时,如果URL字符串中有空格且后面为一个页面元素的选择器,则只请求选择器这个元素,这样就可以实现页面局部刷新效果,如:

	<!--index页面:有事件load,引入jQuery库,实现局部加载--><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><script src="jquery.min.js"></script></head><body><div><a class="list" href="index.html">页面1</a><a class="list" href="index2.html">页面2</a><a class="list" href="index3.html">页面3</a></div><main id="main"><h2>页面1</h2></main><script>$(function($) {// 点击时拿到被点击的a标签中的href属性值,通过load方法中ajax请求数据$('.list').on('click', function() {var url = $(this).attr('href');$('#main').load(url + ' #main');//url字符串中使用空号+选择器实现只加载选择器指定的元素:'index2.html #main'return false;//阻止a标签默认跳转事件})})</script></body></html>

下面是index.html中a标签地址指向页面的代码:

	<!--index2中的代码:--><main id="main"><h2>页面2</h2></main><!--index3中的代码:--><main id="main"><h2>页面3</h2></main>

jQuery中JSONP:

	<script>$.ajax({url: 'http://day-03.io/test/server.php',dataType: 'jsonp',//开启jsonp跨域请求success: function(res) {console.log(res)}})</script>

ajax跨域请求:

实际中ajax中已经支持跨域请求,只需要在服务端设置:header(‘Access-Control-Allow-Origin: *’)此配置,即可实现ajax跨域请求,如:

	<script>$.get('http://day-03.io/test/cors.php', {}, function(res) {console.log(res);});</script>

服务端代码:

	<?php$data = time();// 一行代码允许跨域请求header('Access-Control-Allow-Origin: *');header('Content-Type: application/json');echo json_encode($data);

FormData:

FormData是html5新增传送二进制数据(文件)的对象,其具体用法如:

//通过ajax的方式将文件域中的文件提交给服务端:
var file = $('input').prop('files')[0];//获取到input文件域中的文件var data = new FormData();//创建FormData对象
data.append('names',file);//append方法中次一个参数是文件域中name属性的值,第二个值为文件域中的文件var xhr = new XMLHttpRequest();//创建ajax对象
xhr.open('POST',url);//以post方式连接地址为url的服务端
xhr.send(data);//将包含文件的data对象传给服务端
xhr.onload = function(){//通过onload处理服务端返回的数据,这里还可以使用onreadystatechange事件当this.readyState值为4时处理服务端返回的结果console.log(this.responseText);//服务端返回的数据
};

FormData几个常用的方法如下:

//创建FormData对象:
var formData = new FormData(form);//这里出入一个form表单//1.formData.append('names',datas),将name属性值为names的input控件的值datas追加到对象中,也可以直接将要发送的数据传入对象中,如上面对象创建时传入一个form表单
formData.append('names',datas);//2.formData.get('names');获取form表单中name属性值为names的input中的值
formData.get('names');//3.formData.getAll('names');以数组形式获取form表单中name属性值为names的所有input中的值
formData.getAll('names');//4.formData.has('names');判断form表单中是否有name属性值为names的input中的数据
formData.has('names');//5.formData.delete('names');删除form表单中name属性值为names的input中的数据
formData.delete('names');

fileupload和uploadify插件:

除formData可以上传二进制数据外,这里推荐使用两款插件fileupload和uploadify(兼容IE低版本,支持flash)也是可以上传二进制数据的,如果想要了解更多,建议阅读相关文档:https://www.jq22.com/jquery-info103、https://www.jq22.com/jquery-info230

异步获取form表单内容:

当开发登录页面的时候,一般会把登录页做成异步请求数据的形式,此时需要先获取到form表单中的内容,获取表单内容的方式可以是通过DOM的形式,但是当页面数据足够多的时候,此时以DOM的方式获取form的内容就会很繁琐;jQuery中提供了一个表单序列化的API:serialize(),它可以获取form表单中有name属性的控件的值,利用此方法就可以将form中的内容拿到,之后通过ajax的方式去服务端进行校验,如:

<body><form action="" id="formadmin"><input type="text" name='username'><input type="password" name='password' class='pw'></form><script>$(function() {// 当密码框失去焦点时获取form数据,之后通过ajax的方式提交给服务端:$('.pw').blur(function() {var data = $('#formadmin').serialize();var arr = data.split('&');var dataObj = {};arr.forEach(function(item, i) {var datas = item.split('=');dataObj[datas[0]] = datas[1];});// 通过ajax的方式将form中的数据提交给服务端:$.ajax({url: 'test.php',type: 'post',data: dataObj,dataType: 'json',success: function(result) {console.log(result);}});console.log(dataObj);});});//需要注意:json对象,IE8以下是不支持的,若要兼容IE8以下,那么就的使用一个插件:json2.js或json3.js</script>
</body>

Validator:
Validator是一款做校验的常用插件,其使用方法可以阅读官方文档:https://www.jq22.com/jquery-info743

提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者删除。
笔者:苦海

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/575337.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

chartjs和echartsjs库简介

chart.js和echarts.js: 尽管我们已经掌握了canvas绘图和SVG矢量图&#xff0c;在实际开发中我们依旧不会使用canvas和SVG&#xff0c;因为考虑到开发成本&#xff0c;一般会采用相关的图表库进行辅助开发&#xff0c;市面上常用的图表库有chart.js和echarts.js&#xff1b;如果…

弱智的我

【你能看到多少个人头? 】 0—4张: 弱智; 5—8张: 一般人; 9—11张: 特别感性; 11—13张: 精神分裂. 晕倒, 我是弱智的...就看到一个人头...转载于:https://www.cnblogs.com/zhangzujin/p/3877222.html

POJ 1201

d[i]表示在[0,i]这个区间内一共选了d[i]个数 对于每个为[ai,bi]的区间&#xff0c;你必须在这个区间上至少取ci个不同的整数&#xff0c;用d[i]如何表示&#xff1f; d[ bi ]-d[ ai-1 ] > ci Edge:(ai-1 -> bi) val ci 另外&#xff1a; 0<d[i]-d[i-1]<1 对应边Ed…

typecho和wordpress模板了解、开发流程介绍、前台后台前端后端区分

网站模板搭建网站&#xff1a; 使用网站模板搭建网站很简单&#xff0c;只需要将相关文件放到你自己的服务器上面&#xff0c;之后在进行相关的配置即可。这里给大家介绍两款网站模板&#xff1a; typecho&#xff1a; 是一个轻量高效&#xff0c;简单操作就能搭建网站的模板…

*[topcoder]IncrementingSequence

http://community.topcoder.com/stat?cproblem_statement&pm12107 此题想了半天&#xff0c;当时瞥到了Greedy&#xff0c;所以就想着贪心&#xff0c;最后的方法又纸上画了一下应该是对的。就是排序后依次看是不是满足要求。证明就是如果对数字X&#xff0c;有a和b都能够…

在浏览器端调试代码并直接修改原文件、移动端虚拟键盘中实现搜索按钮

在浏览器端调试代码并直接修改原文件&#xff1a; 此调试方法可以避免在浏览器调试完代码后在到原文件手动修改代码的弊端&#xff0c;其具体方法如下&#xff1a; 1.先将要调试的页面在浏览器&#xff08;Google&#xff09;打开&#xff0c;这里小编打开桌面test文件夹中的…

Bootstrap简介、下载bootstrap及引入文件说明、响应式容器和满屏容器、栅格系统

Bootstrap简介&#xff1a; Bootstrap是Twitter&#xff08;推特&#xff09;开发的&#xff0c;目前最受欢迎的前端开源框架&#xff0c;基于jQuery用于开发HTML、CSS、JavaScript&#xff0c;简洁灵活&#xff0c;常用于开发响应式布局及移动端开发。其中文官方文档&#xf…

JavaScript和jQuery的学习

还有12天就要回学校了&#xff0c;我的假期计划还能实现吗&#xff1f;在这12天里&#xff0c;需要把JavaScript和jQuery学完。我知道这两个技术对于前端网页开发非常重要。前期把HTML和CSS学完了&#xff0c;学的不是特别深&#xff0c;只是简单的过一下&#xff0c;自认为HTM…

bootstrap中语义化标签、字体风格、文本布局、列表排列、特殊字体颜色及特殊背景颜色

语义化标签&#xff1a; bootstrap中提供一些语义化标签&#xff0c;它们自带样式&#xff0c;这里介绍几个样式比较明显的语义化标签&#xff1a; <!-- 1.bootstrap中mark标签定义一个有淡黄色背景的文本 --> <p><mark>hello</mark></p><!…

asp.net使用MVC4框架基于NPOI做导出数据到Excel表

NPOI 是 POI 项目的 .NET 版本。POI是一个开源的Java读写Excel、WORD等微软OLE2组件文档的项目。 使用 NPOI 你就可以在没有安装 Office 或者相应环境的机器上对 WORD/EXCEL 文档进行读写。NPOI是构建在POI 3.x版本之上的&#xff0c;它可以在没有安装Office的情况下对Word/Exc…

bootstrap中表格、修饰图片、浮动、背景框、提示框及关闭提示框、元素淡入淡出及jQuery中操作类名

表格&#xff1a; bootstrap中用类定义了几个风格的表格&#xff0c;使用时给table标签加上类名即可&#xff0c;具体如下&#xff1a; 类名描述.table基础表格&#xff1a;标题加粗&#xff0c;只有水平的淡灰色边框线条&#xff0c;没有垂直方向的线条.table-striped条纹表…

系统数据监控

系统数据监控。 using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; using System.Text; using System.Threading; using Arch.CFramework.CLoggingAdapter; using Ctrip.Mobile.AppDownload.Utility;namespace Ctrip.Mobile.AppD…

bootstrap中单个按钮、按钮组、徽章、进度条

单按钮&#xff1a; 背景按钮&#xff1a;bootstrap提供了具有特殊意义背景的按钮样式&#xff0c;使用时只需给自己的按钮(button、input、a)加bootstrap提供的类名即可&#xff0c;其具体如下&#xff1a; 类名描述.btn基本按钮&#xff1a;灰色、有高度、宽度自适应、没有…

openerp child_of操作符深度解析

child_of 此操作符&#xff0c;从代码来看&#xff0c;等价于&#xff1a; [(x,child_of,id)] > x.prarent_left >id.parent_left && x.parent_left < id.parent_right , 求x&#xff08;的集合&#xff09;。 为了形象的说明&#xff0c;我们一步步来&…

bootstrap中分页、面包屑导航、列表组、卡片、下拉菜单、折叠

分页&#xff1a; 分页功能是当遇到数据很多时&#xff0c;如果都放到一个页面上&#xff0c;那么找起来很不方便&#xff0c;而且不利于性能。此时采用分页功能就能很好的优化用户体验&#xff0c;可是如果自己开发分页功能&#xff0c;那么就会影响开发效率&#xff0c;boot…

当ASP.NET Forms验证方式遭遇苹果IOS

一、问题出现 我在用ASP.NET MVC4做微信开发的时候&#xff0c;用Forms验证方式做为authentication。 一般都是在web.config加&#xff1a; <authentication mode"Forms" ><forms loginUrl"~/Account/Login" name"webcookies" sliding…

bootstrap中导航、导航栏、表单及自定义表单

导航&#xff1a; bootstrap中使用列表封装了水平导航&#xff0c;其类样式如&#xff1a; 类名描述.nav给ul或ol&#xff0c;用于清除列表默认样式&#xff0c;并将列表项水平排列.nav-item给li,用于布局.nav-link给li里面的a,用于a布局.justify-content-center用于居中ul或…

Haproxy安装及配置(转)

1.安装 # wget http://haproxy.1wt.eu/download/1.3/src/haproxy-1.3.20.tar.gz # tar zcvf haproxy-1.3.20.tar.gz # cd haproxy-1.3.20 # make TARGETlinux26 PREFIX/usr/local/haproxy #将haproxy安装到/usr/local/haproxy # make install P…

bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象

轮播图&#xff1a; bootstrap封装了轮播图的功能&#xff0c;其具体如下&#xff1a; 类名描述.carousel创建一个轮播图块的容器&#xff0c;实质是做布局用&#xff1b;且此容器应该有一个di属性&#xff0c;其属性值提供给下面左右按钮href锚点值&#xff0c;用于左右按钮…

hive 常用UDF

Hive UDF整理(可以直接在mysql上测试&#xff0c;hive中没有伪表&#xff0c;需要手动创建&#xff0c;反应慢)字符串函数字符串长度函数&#xff1a;length 语法: length(string A)返回值: int说明&#xff1a;返回字符串A的长度举例&#xff1a;hive> select length(‘abc…