jquery ajax请求参数和返回数据的处理

2bdenny 发布于2019-08-19 17:40 / 1571人阅读

摘要：处理返回数据，渲染到页面上去。之前的做法也是和上面一模一样的吧，返回的数据是数据格式的，然后分别取值赋值给页面元素，所以代码往往是这样的。如果有什么更好的方案，请指教，谢谢另外摘记一个表单输入框中回车自动提交的情况和处理方案

刚接触学会用jQuery ajax的时候，觉得真东西好神奇，这样就可以把数据取回来了啊。然后我可以把取回来的数据渲染到页面上，一颗赛艇。
之前很早接触到项目，并不知道怎么优雅的去用jquery ajax（现在也不优雅）；
那个时候看别人写的代码
有

$.post("","",...)

也有

$.get("","",...)

还有

$.ajax()

当然现在知道点，这些写法都是一个意思，还是习惯用$.ajax()写写吧。
之前的数据处理，发送数据请求(json的数据格式)，然后自己通过下面的方式

var request = {};
request.name = $(".name").val();
request.age = $(".age").val();
request.sex = $(".sex").val();
//...

当时表单发送的参数项少，所以没觉得什么，到后来一个表单很多项数，也这么写，结果request就手工写了好多行，虽然能用吧，但是看看这样的代码就觉着哪里不对劲吧，至少很不“优雅”。
后来，发现其实jquery有个serialize的方法可以序列化表单数据，可以省事很多。
w3c_jquery_serialize-demo

处理返回数据，渲染到页面上去。
之前的做法也是和上面一模一样的吧，返回的数据是json数据格式的，然后分别取值赋值给页面元素，所以代码往往是这样的。

如果数据再多点，真的是感觉略难看。其实应该是有更好的做法的，返回的是一个json对象，所以我们可以通过遍历对象的属性值取到所有值然后依次渲染到页面对应元素即可。
对象遍历可以用for-in来写（有更好的方法来写么？）

$.ajax({
    //...
    success:function(result){
        for(var v in result){
            // 如果渲染的元素都是统一的输入框形式的话，
            $("form").find("input[name="+ v +"]").val(result[v]); 

            // 如果有其他元素 则另外多带带校验处理
        }
    }

})

上面name(或者其他tag在页面中先写好，和返回数据的属性一致)。

如果有什么更好的方案，请指教，谢谢！
另外摘记一个表单输入框中回车自动提交的情况和处理方案

云服务器 GPU云服务器请求参数返回数据成功 ajax返回参数 ajax请求返回list js请求和返回数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78749.html

ajax如何处理服务器返回的3种数据格式

摘要：如果不指定，将自动根据包信息返回或，并作为回调函数参数传递。调用本次请求时传递的参数要求为类型的参数，请求完成后调用的回调函数请求成功或失败时均调用。由服务器返回，并根据参数进行处理后的数据。这篇东西本身是非常基础的，但是经常在处理ajax返回值的时候还是会犯各种小错误，所以就想到把这些方法结合以前写过的代码片段整理一下，方便以后复习和使用。另外呢，虽然能搜到很多类似的文档，但是整理...

Lin_R 2019-08-20 16:35 评论0 收藏0
Ajax详解

摘要：当请求完成后注册一个回调函数。该请求是否触发全局处理事件如等，请求发送前的回调函数，用来修改请求发送前，此功能可用来设置自定义头信息，在函数中返回将取消这个请求。例如，为请求指定一个回调函数名。即改变回调函数的，默认就是传入的整个对象。 Ajax Ajax 全称是 asynchronous javascript and xml，并不是新的编程语言，可以说是已有技术的组合，主要用来实现客...

jokester 2019-08-23 14:15 评论0 收藏0
jquery ajax 方法封装说明

摘要：简要说明前面我写了一篇方法封装及文件设计文档，主要用来说明我们在项目中通常会对的方法进行进一步的封装处理，便于我们在业务代码中使用。这篇文档我们主要对封装的方法进行一个简要说明。简要说明前面我写了一篇《jquery ajax 方法封装及 api 文件设计》文档，主要用来说明我们在项目中通常会对 jquery 的 ajax 方法进行进一步的封装处理，便于我们在业务代码中使用。从那篇文...

z2xy 2019-08-23 16:26 评论0 收藏0
原生JS与jQuery对AJAX的实现

摘要：原生与对的实现一定义里这么解释异步的和。二原生实现所有现代浏览器以及均内建对象。一般是正常未找到页面，一般是错误，或者后台没有创建相应的内部服务错误，多为后台错误。基本上通过发送的数据及传回的数据就能定位问题所在了。原生JS与jQuery对AJAX的实现一、定义 W3C里这么解释AJAX： AJAX = Asynchronous JavaScript and XML（异步的 Jav...

Chaz 2019-08-21 10:37 评论0 收藏0
jQuery Ajax应用与常用插件

jQuery 实现Ajax应用使用load()方法异步请求数据使用load()方法通过Ajax请求加载服务器中的数据，并把返回的数据放置到指定的元素中，它的调用格式为： load(url,[data],[callback]) 参数url为加载服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数使用getJSON()方法异步加载JSON格式数...

bingchen 2019-08-21 12:00 评论0 收藏0