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提交表单" onclick="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