jquery使用ajax提交表单

最新推荐文章于 2022-11-04 14:57:24 发布

zhangzeyuaaa

最新推荐文章于 2022-11-04 14:57:24 发布

阅读量889

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/zhangzeyuaaa/article/details/52195657

版权

Web前端专栏收录该内容

28 篇文章 0 订阅

订阅专栏

我们经常碰到提交表单而不想刷新页面的情况，这时可以借助jquery使用Ajax提交表单。

页面代码：

<form id="form">
    	<label>公司名称：</label><input name="companyName" type="text" /><br/>
    	<label>注册码：</label><input name="registCode" type="text" /><br/>
    	<label>所属县区：</label><input name="area" type="text" /><br/>
    	<label>详细地址：</label><input name="addr" type="text" /><br/>
    	<input type="button" οnclick="add();" value="提交" />
    </form>

引入JQuery文件：

<script type="text/javascript" src="<%=path %>/js/jquery-1.8.3.min.js"></script>

JS代码：

function add(){
			alert($("#form").serialize());
			$.ajax({
				url: "ajaxSubmit",
				data: $("#form").serialize(),
				type: "POST",
				dataType: "json",
				success: function(r){
					alert("公司名称：" + r.companyName + ",注册码：" + r.registCode + 
						"所属县区：" + r.area + "详细地址：" + r.addr);
				}
			});
		}

后台代码（Struts2）：

public void submit() throws IOException{
		HttpServletRequest request = ServletActionContext.getRequest();
		String companyName = request.getParameter("companyName");
		String registCode = request.getParameter("registCode");
		String area = request.getParameter("area");
		String addr = request.getParameter("addr");
		
		JSONObject object = new JSONObject();
		object.put("companyName", companyName);
		object.put("registCode", registCode);
		object.put("area", area);
		object.put("addr", addr);
		
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setCharacterEncoding("UTF-8");
		response.getWriter().write(object.toString());
	}

关键点是使用$(selector).serialize()方法将表单参数序列化，该方法返回字符串参数，其格式如：username=%E5%95%8A%E8%94%A1&password=123456