4002—Ajax随笔

8、getJSON的缓冲问题

$.getJson()在IE浏览器中存在缓存问题，第二次request时，不会进入后台，而会访问缓存

有2种解决方法：

8—1 改用Ajax语句

8—2 增加携带的参数

$.getJSON("/Member/GetExercise.html", { id: $("#Wareid").val(), isBool: loop, random:Math.random()         //增加一个随机数}
, function (data) });//第二种方法：
$.getJSON("/Member/GetExercise.html?random=Math.random", { id: $("#Wareid").val(),isBool: loop,}, function (data) });

7、提交队列list数据到后端

7—1 非json提交

前端JS

var params = {  ids:[]  }$.each(selectedData, function (index, item) { params.ids.push(item.value);
})$.ajax({type:'post',dataType:'json',url: '../MGR_Customer/setCustomerContact',data:params,traditional: true,success: function (jqXHR, status) {}, error: function (xhr) {}});

后端c#

 [HttpPost]public JsonResult setCustomerContact(int[]  ids){   LoginResultModel res = new LoginResultModel(){Success = isWork,Message = isWork ? responContent.ToString() : errContent.ToString()};return Json(res);}

7—2 json提交

前端JS

var ids = [];$.each(selectedData, function (index, item) { ids[index]=item.value })$.ajax({type:'post',dataType:'json',url: '../MGR_Customer/setCustomerContact',data:JSON.stringify( ids),                       contentType:'application/json',success: function (jqXHR, status) {}, error: function (xhr) {}
});

后端c#

 [HttpPost]public JsonResult setCustomerContact(List<string>  ids){return Json("");}

6、【AJAX】技术点

6—1 返回数据预处理

$.ajax({url:'http://localhost:1497/api/User/getBusinessGroup',async:true,                  method:'get',complete:function(jqXHR,textStatus){if(jqXHR.readyState==4){//返回类型为httpresponsemessage,需转换为JSON才能使用    var  list=JSON.parse(jqXHR.responseText);list.forEach(function(e,i){   //只有数组，列表才能使用forEach，否则报错：forEach  is not function                     console.log(i+"  index:"+e.Fid+" 编号："+e.Fnumber+" 名称："+e.Fname+"  特色："+e.Fspec);});}                                           },error:function(xhr){alert(xhr);}
});

5、【AJAX】返回数据到<table>

C#代码如下

 public class TestController : Controller{List<userModel> userList = new List<userModel>();        // GET: Testpublic ActionResult Index(){return View();}public ActionResult List(){userList.Add(new userModel(){Name="贾志国",Age=41,Address="北京市东城区",Sex="男"});userList.Add(new userModel(){Name="和平",Age=39,Address="北京市东城区和平里街道",Sex="女",});userList.Add(new userModel(){Name="贾志新",Address="北京市东城区和平里街道",Age=32,Sex="男"});AjaxEntity<List<userModel>> myResult = new AjaxEntity<List<userModel>>() { Success=true,Message="成功啦",Data=userList};//—9—    返回JSONreturn Json(myResult, JsonRequestBehavior.AllowGet);}        }

Models内容

 public class AjaxEntity<T>{[JsonProperty(PropertyName = "Success")]public bool Success { get; set; }[JsonProperty(PropertyName = "Message")]public string Message { get; set; }[JsonProperty(PropertyName = "Data")]public T Data { get; set; }}

Index.html

<!--  在body块内      --><div id="header_field"><form id="form_field"><input type="button" id="btnGet" value="获取" /></form><div id="data-result"><p id="result_title"><h4><b>获取内容：</b></h4></p><p id="result_message"></p><table border="1px" cellpadding="0"><tr><th width="150">姓名</th><th width="100">性别</th><th width="100">年龄</th><th width="200">地址</th></tr><tbody id="tbody"></tbody></table></div></div><script type="text/javascript">$("#btnGet").click(function () {$.ajax({type: 'get',url: '/Test/List',                      success: function (data, status, xhr) {if(status){$("#result_title").html("!");var msg = data.Message;if (data.Success) {$("#result_message").html("返回成功—"+msg);} else {$("#result_message").html("返回失败—"+msg);}var list = data.Data;loadList(list);}else{$("#result_title").html("F");}},error: function (xhr) {alert(xhr);}})});function loadList(list) {var tbody = $("#tbody");var html = "";//_2 遍历数据源list.forEach(function (e) {html += "<tr>";html += "<td>" + e["Name"] + "</td>"html += "<td>" + e["Sex"] + "</td>"html += "<td>" + e["Age"] + "</td>"html += "<td>" + e["Address"] + "</td>"html += "</tr>";});tbody.append(html);}</script>

效果如下：

4、【JQuery/JS】Ajax提交数据到actionResult

4—1 action代码

 [HttpPost]public ActionResult calculateJson(){var sr = new StreamReader(Request.InputStream);var stream = sr.ReadToEnd();var list = JsonConvert.DeserializeObject<List<userViewModel>>(stream);if(list.Any()){//判断有无数据}userModel newModel = new userModel(){Name=list[0].name,Age=1,Address="中国未定义 "+list[0].phone,Sex="未知"};AjaxEntity<userModel> myResult = new AjaxEntity<userModel>(){Success=true,Message="OK",Data=newModel};return Json(myResult);
}

4—2 网页代码

 $("#btnPost").click(function () {//—1—   initializevar txtname=$("#txtname").val();var txtphone=$("#txtphone").val();//声明一个JSON数组串var jsonPara = [];jsonPara.push({ "name": txtname, "phone": txtphone });//提交数据$.ajax({url:"/Test/calculateJson",async:false,type:'post',dataType: 'json',contentType:'application/json',data: JSON.stringify(jsonPara),success: function(data,status,xhr) {if(status){var receiveTitle;if(data.Success){receiveTitle = "1";receiveTitle += data.Message + "--" + data.Data.Name;}else{receiveTitle = "0";receiveTitle += data.Message;}$("#txtphone").val(receiveTitle);}else{alert("接收失败");}},error: function () {alert("请求失败");}})});

1、JQuery【Ajax各种方式】异同

1—1 GET() 异步请求

格式：$.get( url [, data] [, callback] )

$.get("/Test/showData",          //请求Url{id=33,name=tommas      //Data},function(data,state){//ajax请求成功后，执行alert(data)            //返回的数据}
)

1—2 POST() 异步请求

格式：$.post(url,[data],[callback],[type])

$.post("/Test/personal",             //访问Url{id=123,                   //传入参数name="ashly",},function(data,state){alert(data);            //返回数据结果}，“json”                       //数据类型
)

1—3 $.getJSON()

格式：getJSON(url,[data],[callback]) 。支持跨域访问

$.getJSON("../MGR_Customer/getCustomerTypeList", function (data,status) {//回调函数$.each(data, function (index,item) {$("#qey-type").append(new Option(item.Fname, item.Fid))})}
);

1—4 $.ajax()

标准ajax函数。

4002—Ajax随笔相关推荐

【SSR服务端渲染+CSR客户端渲染+post请求+get请求+总结】三种开启服务器的方法总结
SSR服务端渲染 get请求方式 get.html文件 <form action="http://10.9.46.253:4002" target="_self&q ...
2016.6.23 随笔———— AJAX
1.什么是AJAX: AJAX 即Asynchronous JavaScript And XML(异步 JavaScript和XML), 创建快速动态网页技术通过后台与服务器进行少量数据交换,AJA ...
html点击按钮获取列表数据传递到页面,随笔：ajax传递数组，layui父子页面传值，下来菜单赋值，父页面数据获取，表格数据替换为字符串...
一．Ajax向后台传递数组问题:(声明前台我使用的layui框架) 例:我们要多前台一个数据表格进行批量删除操作,我们通过复选框选中数据id,将id存入一个数组中,然后利用ajax传递给后台,完成批量 ...
Web jquery ajax，EL遍历 js刷新 jquery遍历json数组填充表格等等随笔
1.ajaX 局部刷新 type- 请求的类型 url- 地址 data- 参数多的话用逗号隔开在使用 jquery之前先添加:<script type="text/javas ...
jQuery随笔20190713(jQuery HTML、遍历、Ajax)
1.jQuery HTML 2.jQuery 遍历 3.jQuery Ajax 1)Ajax简介 Ajax=异步JavaScript 和 XML (Asynchronous JavaScript an ...
ASP.NET AJAX入门系列（1）：概述
经常关注我的Blog的朋友可能注意到了,在我Blog的左边系列文章中,已经移除了对Atlas学习手记系列文章的推荐,因为随着ASP.NET AJAX 1.0 Beta版的发布,它们已经不再适用,为了不 ...
《高性能javascript》领悟随笔之-------DOM编程篇(二)
<高性能javascript> 领悟随笔之-------DOM编程篇二序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...
《构建高性能web站点》随笔无处不在的性能问题
前言– 追寻大牛的足迹,无处不在的"性能"问题. 最近在读郭欣大牛的<构建高性能Web站点>,读完收益颇多.作者从HTTP.多级缓存.服务器并发策略.数据库.负载均衡. ...
springmvc 接收 ajax 请求
转载自:https://www.cnblogs.com/oyx305/p/5220751.html 一.传json单值或对象 1.前端 1 var data = {'id':id,'name':nam ...

4002—Ajax随笔

8、getJSON的缓冲问题

7、提交队列list数据到后端

4002—Ajax随笔相关推荐

最新文章

热门文章