本教程主要讲解如何使用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