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

这篇文章主要介绍了jquery序列化form表单,使用ajax提交后处理返回的json数据的示例,需要的朋友可以参考下

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文件,数据库和数据库的连接都有采用统一编码,才不会出现乱码等情况

时间: 2024-10-10 10:43:40

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

jquery序列化from表单使用ajax提交返回json数据(使用struts2注解result type = json)

1.action类引入struts2的"json-default"拦截器栈 @ParentPackage("json-default") //示例 @ParentPackage(WapBaseAction.WAP_PACKAGE) //WAP_PACKAGE继承了json-default @Namespace("/") public class ModifyResumeAction extends WapBaseAction {... [emai

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

本文实例讲述了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表单【支持ajax提交form对象表单entity.xxx】

需要form表单提交,大表单对字段后台人工处理太麻烦.还是选择form表单对象(entity.xx)提交方便,那么怎么ajax提交这样的form对象表单呢? 命名jquery.commons.js内容如下 /**  * FORM对象表单ajax提交前数据处理方法  * @param frm  * @returns JSON Object  */ function getFormJson(frm) {     var o = {};     var a = $(frm).serializeArra

使用jQuery重用form表单并异步提交到其他action

在做页面开发的时候,有时候要重用表单的数据,并异步请求提交到其他的链接中,这个时候就可以使用jquery去修改表单的action值(记得使用后修改回来),并调用submit方法,当然后台的链接action或者controller方法必须返回值类型为void,否则将发生页面跳转,返回null则显示空白页,无法实现异步调用.另外,这里可以使用另外一个方式提交,将表单序列化,然后用jQuery的ajax提交,不过要对返回的信息进行处理. 直接上代码: (1)jQuery改变form属性 $(".exp

FORM表单转AJAX提交

//将form转为AJAX提交 function ajaxSubmit(frm, fn) {     var dataPara = getFormJson(frm);     $.ajax({         url: frm.action,         type: frm.method,         data: dataPara,         success: fn     }); } //将form中的值转换为键值对. function getFormJson(frm) {   

jquery将form表单序列化常json

var formData = {};$.each(form.serializeArray(),function(i, item){ formData[item.name] = item.value;}); $.ajax({ cache: true, type: "POST", url:ajaxCallUrl, data:$('#yourformid').serialize(),// 你的formid async: false, error: function(request) { al

jQuery控制form表单元素聚焦

CreateTime--2017年5月28日08:57:16Author:Marydon jQuery使form表单的第一个文本框聚焦 /** * 使form表单的第一个文本框聚焦 */ function makeFirstTextFormElementFocused (formId) { $('#' + formId + ' :text').eq(0).focus(); } 测试: window.onload = function() { makeFirstTextFormElementFoc

Python之路【第十三篇续】jQuery案例-Form表单&amp;插件及扩展

jQuery案例-Form表单 学完这个form表单的案例,如果有人说这个表单(功能)还不够NB(此文不包含样式,样式是CSS比较简单可以根据需求自己添加),那么找武Sir他帮你搞定. 一步一步来 注意事项(目录结构): 在写前端html代码的时候要注意(任何代码都一样),一定要规划好目录结构方便其他的人来看你的代码! 如果还有其他的html页面可以在加一个html存储的文件夹. 1.首先看下HTML主体 <!DOCTYPE html> <html lang="en"

jQuery插件 -- Form表单插件jquery.form.js

jquery.form.js官网 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit(), 它们集合了从控制表单元素到决定如何管理提交进程的功能.另外,插件还包括其他的一些方法: formToArray().formSerialize().fieldSerialize().fieldValue().clearForm(). clearFields