刚接触学会用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在页面中先写好,和返回数据的属性一致)。

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


lifesimple
816 声望21 粉丝

好好学习