jquery序列化form表单使用ajax提交后处理返回的json数据_jquery

1、返回json字符串:

复制代码 代码如下:

/** 将一个字符串输出到浏览器 */
    protected void writeJson(String json) {
        PrintWriter pw = null;
        try {
            servletResponse.setContentType("text/plain;charset=UTF-8");
            pw = servletResponse.getWriter();
            pw.write(json);
            pw.flush();
            pw.close();
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            if (pw != null) {
                pw.close();
            }
        }
    }

2、通过eval将返回的json字符串转换成json对象:

复制代码 代码如下:

$.ajax({
        data:{
            "shipmmsi":shipmmsi,
            "shipname":shipname
        },
        url : "shipbk/findShipMMSIAndName.do",
        async : true,
        type : "POST",
        success : function(data) {
            var ships = eval('(' + data + ')');
            $("#bindShipmmsiDiv table tbody").html("");
            if(ships!=null){
                if(ships.length){
                    $("#bindShipmmsiDiv").show();
                    var trs="";
                    for(var i=0;i<ships.length;i++){
                        trs+="<tr><td>"+ships[i].mmsi+"</td><td>"+ships[i].vesselName+"</td></tr>";
                    }
                    $("#bindShipmmsiDiv table tbody").append(trs);
                    //给tr注册点击事件
                    $("#bindShipmmsiDiv table tbody tr").click(function(){
                        $(this).addClass('select_tr').siblings().removeClass('select_tr');
                    });
                    $("#bindShipmmsiDiv table tbody tr").dblclick(function(){
                        fillShipMMSIAndName(this);
                        $("#bindShipmmsiDiv").hide();
                    });
                }
            }
        }
    });

3、通过jquery的 $("form").serialize() 可以将form表单的数据序列化后提交到后台,因此通过ajax可以操作form表单并处理返回的数据。

复制代码 代码如下:

$.ajax({
  url : 'deliveryWarrant/update.do',
  data : $('#myform').serialize(),
  type : "POST",
  success : function(data) {
    var res = eval('(' + data + ')');
    if (res && res.success == true) {   
      alert(res.message);
    location.href="/godownWarrant/findToDeliveryWarrant.do?godownWarrant.code="+$("#myform input[name=godownWarrant\\.code]").val();
    } else {
      alert(res.message);
    }
  }
});

4、防止乱码的处理方法:

jsp页面:charset:utf-8
servlet:utf-8
filter:utf-8
在PrintWriter out = response.getWriter()之前加一句
response.setCharacterEncoding("UTF-8")就可以解决乱码的问题。
但是得记住一定要放在声明PrintWwrite之前。

总之,前台界面,java文件,数据库和数据库的连接都有采用统一编码,才不会出现乱码等情况

PS:关于json操作,这里再为大家推荐几款比较实用的json在线工具供大家参考使用:

在线JSON代码检验、检验、美化、格式化工具:
http://tools.jb51.net/code/json

JSON在线格式化工具:
http://tools.jb51.net/code/jsonformat

在线XML/JSON互相转换工具:
http://tools.jb51.net/code/xmljson

json代码在线格式化/美化/压缩/编辑/转换工具:
http://tools.jb51.net/code/jsoncodeformat

在线json压缩/转义工具:

http://tools.jb51.net/code/json_yasuo_trans

C语言风格/HTML/CSS/json代码格式化美化工具:
http://tools.jb51.net/code/ccode_html_css_json

时间: 2024-09-30 11:36:20

jquery序列化form表单使用ajax提交后处理返回的json数据_jquery的相关文章

jquery序列化form表单使用ajax提交后处理返回的json数据

 这篇文章主要介绍了jquery序列化form表单,使用ajax提交后处理返回的json数据的示例,需要的朋友可以参考下 1.返回json字符串:    代码如下: /** 将一个字符串输出到浏览器 */     protected void writeJson(String json) {         PrintWriter pw = null;         try {             servletResponse.setContentType("text/plain;cha

jQuery实现form表单基于ajax无刷新提交方法详解_jquery

本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o

jQuery改变form表单的action,并进行提交的实现代码_jquery

jQuery改变form表单的action,并进行提交的实现代码 <s:form action="/student/traScore.action?method=list" id="queryForm" name="queryForm"> </s:form> //导出学生实训成绩 function exportScore(){ var path = "${ctx}/student/traScore.action?

form-jQuery-serialize() 序列化 Form表单

问题描述 jQuery-serialize() 序列化 Form表单 var path = "${pageContext.request.contextPath}"; $(document).ready(function(){ var url = path+"/webservice/getUser"; var queryString = ""; queryString = "?"+$("#search").

jQuery实现form表单元素序列化为json对象的方法_jquery

本文实例讲述了jQuery实现form表单元素序列化为json对象的方法.分享给大家供大家参考,具体如下: 这段代码序列化form表单元素为json对象: <!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>jQuery扩展--form序列化到json对象</title> <meta http-equiv=Content-Type content=&

jquery获取form表单input元素值的简单实例_jquery

一般取值方法 $("#id").val(); $("#id").attr("value");  //其中value是元素的属性名如<s:textfield  id="cifName" key="cifName"   name="#request.consBean.cifName" />的id,key,name属性.取到的值是属性后对应双引号里面的字符. function sa

jquery把form表单保存成对象传给接口

在模板式开发时,我们form表单可以直接提交到服务器相应的方法,服务器就可以进行处理,但在新的移动端,用的比较多的是以json数据格式的传输,和服务器端的接口交互,这样我们需要把传统的form表单元素组合成我们想要的对象,再传输给接口. 下面是个例子: <form action="" id="form" method="post">  <input type="hidden" name="id&qu

javascript-js我想让2个form表单、都提交。但是只会执行第二个。这是为什么

问题描述 js我想让2个form表单.都提交.但是只会执行第二个.这是为什么 我想js我想让2个form表单.都执行.但是只会执行第二个.这是为什么, 解决方案 表单增加target="_blank"提交到新窗口..要不你2个表单都是在当前窗口提交,浏览器怎么知道是要提交哪个,只能乱提交了.. 要不就用ajax异步提交,不要使用普通表单的提交方式 解决方案二: 既然同时执行,为什么写成俩个form,一个form不就好了吗,你要做什么操作就在js中实现,一个form肯定能实现的,你俩个f

ajax接受后台返回的json数据不全

问题描述 ajax接受后台返回的json数据不全 后面没东西了 导致ajax直接进入error方法了知道的大神帮忙支支招 , 万分感谢 解决方案 网络不稳定导致数据没有传输完吧...你浏览器直接访问地址能获取到完整的数据没? 解决方案二: 你先检查后台组织json的地方是否组织了正确的数据 解决方案三: 如果是你在后台自己封装的json对象,需要考虑容错,不要因为某一项异常或导致了返回的对象不是一个完整的Json对象.最好是先取值,最后统一封装,而不是动态拼接这种形式,极易出错. 解决方案四: