Ajax JavaScript的异步提交

我们用bootstrap来布局就不用写样式，所以我们先引入bootstrap框架，放一个div类名为container，再在里面写form表单，在表单里我们先放四个div分别放姓名，性别和地址还有按钮，并且给他们两个相同的类为form-group form-row，有了这两个类就把样式都写好了。
在每个的div中放一个label标签（除了放按钮的div），我们把文本放在label标签内，并且给label标签三个相同的类form-check-label col-1 text-center。
在姓名的div内再放一个input标签，让它里面的type属性为text，name属性为name，id为name，class为form-control col-11。
在性别的div内再放一个select标签，让它里面的name属性为sex，id为sex，class为form-control col-11，在select标签里面放三个option标签，里面的文本分别为请选择，男，女，并且他们对应的value值分别为0，男，女。
在地址的div内再放一个text area标签，让它里面的name属性为address，id为address，class为form-control col-11。
在最后一个div内再放八个button标签，他们的id分别为btnAjax，btnAjaxPost，btnGet1，btnGet2，btnPost1，btnPost2，btnGetJson1，btnGetJson2，其他样式都差不多，就是颜色不同 。注：οnsubmit="return false;" 禁止表单自动提交，from表单有这个属性只有JavaScript的方法才能实现手动提交，jQuery不能，反之都能实现手动提交

首先我们来写一个用Ajax从控制器中获取数据。

我们给第一个button按钮一个点击事件，再到里面声明一个变量ajax但是不赋值，我们要创建一个XMLHttpRequest对象，但是有一些浏览器它没有这个对象所以在这里我们要进行一个判断，如果浏览器有XMLHttpRequest对象就把new XMLHttpRequest();赋值给ajax，否则就把new ActiveXObject("Microsoft.XMLHTTP");赋值给ajax。

判断完了我们就来发送请求，用ajax里面的open方法来写，在open方法里面有三个参数，第一个是提交方式，第二个是提交的路径，第三个是判断是否是异步发送的请求，如果为true表示异步，如果是false表示同步，请求完了就用ajax里面的send方法来发送，open里的路径是我们在控制器里写的一个方法，

public ActionResult index2()

{

string str = "{\"name\":\"丁总\",\"sex\":\"女\",\"address\":\"江西丰城\"}";

return Content (str);

//return json(str,JsonRequestBehavior.AllowGet);

}

在发送请求后我们要用一个方法来接收数据，所以我们要在点击事件里面再写一个事件，onreadystatechange：这个事件为存储函数（或函数名），每当readyState属性发生改变时触发。然后在里面写一个判断，如果当readyState=4且status==200时，表示响应已就绪。
readyState :存有XMLHttpRequest的状态。从0到4发生变化

0:请求未初始化

1：服务器连接已建立

2：请求已接收

3：请求处理中

4：请求已完成，且响应已就绪

4.我们先声明一个变量ajax2将从json格式的字符串转化成js对象赋值给他，var ajax2 = JSON.parse(ajax.responseText);里面的responseText属性为获得字符串形式的响应数据是XMLHttpRequest对象里的其中一个属性，这个对象里面还有另一个属性responseXML :获得XML形式的响应数据，这样我们就能获取控制器中的数据了，我们现在要做的是将获取的数据在表单中显示出来，所以我们要获取表单中的value值并把我们获取的值赋值给它，document.getElementById("name").value = ajax2.name;

document.getElementById("sex").value = ajax2.sex;

document.getElementById("address").value = ajax2.address;这样我们就写完了Ajax的获取。下次我们再来写post提交。

淘气的小丁-Ajax相关推荐

[转]40种网页常用小技巧----Ajax中国
1. οncοntextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 <table border οncοntextmenu ...
小程序 ajax 加载,小程序实战-小程序网络请求异步加载
最初看到小程序的网络请求的时候,尤其是演示示例中,userInfoReadyCallback这个函数更是一头雾水.其实并不怎么理解.一直很费解.网上各路大侠都有解释,但是就是,不知道是怎么个顺序,而我 ...
小程序公共封装ajax,超简单 Promise封装小程序ajax 超好用以及封装登录
//网络类 //封装网络请求 const ajax = (ajaxData, method) => { wx.showLoading({ title: '加载中', mask: true }); ...
小程序ajax返回html,微信小程序封装Ajax请求
var a朋不功事做时次功好来多这开制的请一例农在pp = getApp()是能览调不页新代些事几求事都时学下是事; c带道术用量确示常构端析以要效开的用,近不onst serverIp = app. ...
简单ajax类, 比较小, 只用ajax功能时, 可以考虑它
忘了哪儿转来的了, 不时的能够用上, 留存一下 <script language="javascript" type="text/javascript"& ...
JS 小坑 - AJAX请求的小坑，请求接口404
背景:公司需要帮助其他项目修改源码,但是跑起来发现无法正常发送请求,请求全部为404状态.后端也确定了对请求的接口进行了处理.前端js设置的url也看起来很正常. 思考: 1.确认后端接口的地址(确定 ...
微信小程序ajax请求分页加载数据
分页加载功能大家遇到的应该会经常遇到,应用场景也很多,例如微博,QQ,微信朋友圈以及新闻类应用,都会有分页加载的功能,这不仅节省了我们用户的流量,还提升了用户体验.那么今天的这篇文章就是介绍微信小程序 ...
ticwatch能支持鸿蒙吗,[杰瑞]安卓手表的最强形态，应该... - @魔法师蛋小丁的微博精选 - 微博国际站...
[杰瑞]安卓手表的最强形态,应该用一颗MCU作为主控制器: MCU连接传感器.屏幕.按键.振动.音频.GPS.NFC和蓝牙,有了这些外设,已经是一个大号手环了. 那么运行安卓的SoC做什么呢?它集成移 ...
微信小程序 ajax请求同步
请求方法 call_fun: function (args) {var url = app.globalData.api_url + args.name;return new Promise((res ...
微信小程序中ajax同步请求方法[转载]
最近在做微信小程序,在ajax获取数据的时候卡了很久,需求是在一个ajax中请求完成然后用这个返回数据再去请求另一个ajax,然后把两个数据进行处理(在第一个ajax中).因为微信小程序ajax是异步 ...

淘气的小丁-Ajax

Ajax JavaScript的异步提交

淘气的小丁-Ajax相关推荐

最新文章

热门文章