jquery ajax教程第3课-使用ajax提交form表单(转)

本教程主要讲解如何使用jquery ajax提交form表单，正常html页面提交表单都会刷新页面，使用ajax提交form可以达到无刷新提交from表单。本实例使用java工程实现，ajax提交form表单核心代码如下：

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    function submitForm(){
        $.ajax({
                type: "POST",
                dataType: "json",
                url: "handle_form.jsp",
                data: $('#userInfo').serialize(),
                success: function (data) {
                    //alert(data.result);
                    $("#result").html(data.result);
                },
                error: function(data) {
                    alert("错误:"+data.responseText);
                }
            });
    }
</script>

要提交的表单html代码如下：

<form id="userInfo" action="handle_form.jsp">
    姓名：<input name="name" type="text" />
    Sex：<input name="sex" type="radio" value="1" checked="checked" />男<input name="sex" type="radio" value="0" />女
    爱好：<input name="hobby" type="checkbox" value="跑步" />跑步
    <input name="hobby" type="checkbox" value="篮球" />篮球
    <input name="hobby" type="checkbox" value="足球" />足球
    <input type="button" value="Ajax提交表单" οnclick="submitForm()" />
</form>
<div id="result">这里将显示ajax表单提交返回结果</div>

本例子使用jsp页面处理参数，如果无java语言基础，看前两段代码即可，jsp处理参数代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page import="java.io.PrintWriter"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";

    String name = request.getParameter("name");
    String sex = request.getParameter("sex");
    String[] hobbys = request.getParameterValues("hobby");

    String sexStr = sex.equals("1") ? "男" : "女";
    StringBuilder builder = new StringBuilder();//使用StringBuilder效率要比使用String += 效率高
    for (String hobby : hobbys) {
        builder.append(hobby + ",");
    }

    PrintWriter writer = response.getWriter();
    writer.write("{\"result\":\"您好 " + name + ",您的性别是" + sexStr
            + ",您的爱好是" + builder + "\"}");
    writer.close();
%>

使用jquery ajax提交表单可以使提交表单操作变得简单，并且可以实现无刷新提交，本例子完整代码下载：点击下载教程源码

本文引用地址：http://www.java135.com/qianduankaifa/jquery_ajax_submitform.html