JQuery学习26篇(ajax之post)

最新推荐文章于 2024-09-10 11:33:20 发布

程宇寒

最新推荐文章于 2024-09-10 11:33:20 发布

阅读量282

点赞数 1

文章标签： jquery javascript js ajax之post 前端开发

本文链接：https://blog.csdn.net/czh500/article/details/103786934

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery学习26篇(ajax之post)</title>
<link rel="stylesheet" type="text/css" href="inputAndDiv.css">
<style type="text/css">
input[type=submit] {
	background-color: red;
	border: 0px solid red;
	color: #fff;
}
</style>
</head>
<body style="background-color: #CCE8CF;">
	<h3 style="color: #cd1636;">JQuery学习26篇(ajax之post)</h3>
	 <form id="form1" action="">
        <p>
        用户名:<input id="name" type="text" name="userName">
        </p>
        <p>
        email:<input id="user_email" type="text" name="userEmail">
        </p>
        <p><input id="toServer" type="button" value="提交"></p>
        <p>
        <input id="toServer2" type="submit" value="提交">
        </p>
    </form>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$('#toServer').click(function() {
	console.log('1........');
	var url = 'TestAjax';
	var data = {};
	data.uName = $('#name').val();
	data.email = $('#user_email').val();
	$.post(url, data, function(returnServerData){
		console.log(returnServerData);
	});
});


$('#toServer').click(function() {
	console.log('2........');
	var url = 'TestAjax';
	var nameValue = $('#name').val();
	var emailValue = $('#user_email').val();
	$.post(url, 'uName=' + nameValue + '&uEmail=' + emailValue,
			function(returnServerData){
		console.log(returnServerData);
	});
});


$('#form1').submit(function(){
	console.log('test1.......');
    var url = 'TestAjax';
    var data = {};
    data.u_Name = $('#name').val();
	data.u_email = $('#user_email').val();
//以对象的形式提交数据(数据比较多的时候，可以使用这种方式)
    $.post(url , data , function(msg){
    	console.log(msg);
    });
    return false; //拦截住表单提交行为
});


$('#form1').submit(function(){
	console.log('test2.......');
    var url = 'TestAjax';
    var data = {myName:$('#name').val(), myEmail:$('#user_email').val()};
//以对象的形式提交数据(数据比较多的时候，可以使用这种方式)
    $.post(url , data , function(msg){
    	console.log(msg);
    });
    return false; //拦截住表单提交行为
});

$('#form1').submit(function(){
	console.log('test3.......');
    var url = 'TestAjax';
//     var data = {};
//     data.u_Name = $('#name').val();
// 	data.u_email = $('#user_email').val();
//以key=value&key=value的形式提交数据
var nameValue = $('#name').val();
var emailValue = $('#user_email').val();
    $.post(url , 'name=' + nameValue + '&email=' + emailValue, function(msg){
    	console.log(msg);
    });
    return false; //拦截住表单提交行为
});
</script>
</html>

下面是servlet代码(servlet的名字叫TestAjax)

package com.test;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Enumeration;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 使用jquery的ajax的post提交数据
 */
@WebServlet("/TestAjax")
public class TestAjax extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=UTF-8");
		Enumeration<String> parameterNames = request.getParameterNames();
		String returnStrToClient = "{";
		while (parameterNames.hasMoreElements()) {
			String parameterName = parameterNames.nextElement();
			String parameterValue = request.getParameter(parameterName);
			System.out.println("参数名" + parameterName + " 参数值" + parameterValue);
			returnStrToClient += "\"" + parameterName + "\":\"" + parameterValue + "\",";
		}
		//去掉最后一个多余的,逗号
		returnStrToClient = returnStrToClient.substring(0, returnStrToClient.length() - 1);
		System.out.println(returnStrToClient);
		returnStrToClient += "}";
		System.out.println(returnStrToClient);
		PrintWriter pw = response.getWriter();
		pw.print(returnStrToClient);//返回给浏览器客户端
		pw.flush();
		pw.close();
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}