怎样实现用ajax向服务器发送请求并接收服务器返回的数据,并在HTML页面的Table中显示?

怎样实现用ajax向服务器发送请求并接收服务器返回的数据,并在HTML页面的Table中显示?,第1张

比如服务器上有张表或者list\x0d\x0aidnamesex\x0d\x0a1张三男\x0d\x0a2李四女\x0d\x0a3王五男\x0d\x0a你首先在后台代码中把这个表处理成为JSON格式然后用Response.write的方法输出来,比如这样\x0d\x0a[{id:1,name:'张三',sex:'男'},{id:2,name:'李四',sex:'女'},{id:3,name:'王五',sex:'男'}]\x0d\x0aJSON是用于在JS中描述实体对象的一种方式,具体关于JSON的知识可以看w3school.com.cn上的相关内容,我这儿就不给你细讲了,很简单,我只说做法:\x0d\x0a为了方便使用,你需要在你的页面中引用jQuery库,我不知道你用什么语言做的后台程序,原理一样\x0d\x0a$.ajax({\x0d\x0aurl:"这里换成你写好的用于把表转换成JSON的后台处理文件地址,比如a.aspx?参数",\x0d\x0atype:"POST",//这里是AJAX请求的方式\x0d\x0adataType:"JSON",//如果你回发的内容是JSON格式的就用这个,否则用Text或其他\x0d\x0adata:{\x0d\x0a参数1:值,\x0d\x0a参数2:值,\x0d\x0a......\x0d\x0a参数n:值\x0d\x0a},//要发送的参数,如果无参数可以不写此项\x0d\x0asuccess:function(data)\x0d\x0a{\x0d\x0a//此处写入发送成功后要处理的代码,而参数里的这个data,就是请求成功后返回来的上面那个格式的JSON,你可以用data[i]的值来取其中一行,如取张三的数据就是\x0d\x0adata[0].name,就取出了张三的name属性\x0d\x0a所以你可以在这里用循环去处理data,然后将结果用document.write的方式输出来就完成了。\x0d\x0a},\x0d\x0aerror:function(XMLHttpRequest,Error,F)\x0d\x0a{\x0d\x0a//出错后可以在这里给出提示,Error参数表示错误信息\x0d\x0a}\x0d\x0a})\x0d\x0a还有弄不清楚的地方可以继续和我探讨。

注:以下状态码大部分都是自己项目中遇到的,现记录方便日后查看。

通常前后端使用ajax交互时,客户端向服务器发送请求时,然后服务器向我们返回状态码。 状态码就是告诉我们服务器响应的状态 ,由3位数字组成,其中第一位数字表示响应类别,响应类别从1到5分为五种 。

表示请求被服务器正常处理 ,最常见的就是这个

表示请求已成功处理,但是没有内容返回

也就是返回的响应报文中没有报文实体

一般用在只是客户端向服务器发送信息,而服务器不用向客户端返回什么信息的情况

永久重定向,表示请求的资源已经永久的搬到了其他位置 ,资源已经被分配了新的URI

临时重定向,表示请求的资源临时搬到了其他位置 ,请求的资源暂时被配到到了新的URI,和301很像,只不过资源是临时移动

表示请求资源存在另一个URI,应使用GET定向获取请求资源

303功能与302一样,区别只是303明确客户端应该使用GET访问

表示客户端自从上次请求后,请求的网页未修改过。服务器返回此响应时,不会返回网页内容。

304通常在IE浏览器下多次请求同一个地址出现的。

场景:删除表格其中一条数据后重新请求列表数据渲染表格,第二次请求时状态码是304导致被删除的数据还是出现在前端。

原因:IE浏览器下同一地址的ajax请求优先读取本地缓存数据

解决方法:在请求地址后面加上时间戳,保证每次请求的地址都不一样,这样浏览器就无法读取缓存。

表示请求报文存在语法错误或参数错误,服务器不理解 ,需要修改请求内容后再次发送

表示发送的请求需要有HTTP认证信息或者是认证失败了

返回401的响应必须包含一个适用于被请求资源的WWW-Authenticate首部以质询用户信息

表示对请求资源的访问被服务器拒绝了,通常是 没有权限或者跨域

表示服务器找不到请求的资源

表示请示方式不对,注意检查method,比如后端定义post请求方式而我们用了get,delete,put,path等方式均报错。

表示服务器执行请求的时候出错了。(后端的问题)

表示服务器超负载或正停机维护,无法处理请求

以上,如有错误欢迎指正,如果喜欢还请点个赞再走,谢谢!更多项目实战源码请移步我的 码云地址


欢迎分享,转载请注明来源:夏雨云

原文地址:https://www.xiayuyun.com/zonghe/335961.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-04
下一篇2023-05-04

发表评论

登录后才能评论

评论列表(0条)

    保存