JQuery学习28篇(ajax方法)

最新推荐文章于 2022-12-01 19:21:01 发布

程宇寒

最新推荐文章于 2022-12-01 19:21:01 发布

阅读量404

点赞数

文章标签： JQuery ajax方法 javaScript js 前端开发

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

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery学习28篇(ajax方法)</title>
<link rel="stylesheet" type="text/css" href="inputAndDiv.css">
<style type="text/css">
.div1{
	/**div居中**/
	margin:auto;
	border:10px solid silver;
	background-color:#FF9;
	width:300px;
	height:300px;
	opacity:0.50;/**其他浏览器（0.5为透明度，在0-1之间的浮点数）**/
	filter:alpha(opacity=40);/**IE（40为透明度，在0-100之间的整数）**/
}
</style>
</head>
<body style="background-color: #CCE8CF;">
	<h3 style="color: #cd1636;">JQuery学习28篇(ajax方法)</h3>
	<div id="messageBox" class="div1" style="display: none;">
		监测到有ajax在执行**************
	</div>
	<input type="button" value="案例1，jQuery中的load()方法" onclick="testLoad1();">
	<br/><br/>
	<input type="button" value="案例2，jQuery中的load()方法" onclick="testLoad2();">
	<br/><br/>
	<input type="button" value="案例3，jQuery中的load()方法" onclick="testLoad3();">
	<br/><br/>
	<input type="button" value="案例4，jQuery中的load()方法" onclick="testLoad4();">
	<br/><br/>
	<div id="div1" style="border: 3px solid OrangeRed;"></div><br/>
	<div id="div2" style="border: 3px solid Green;"></div><br/>
	<div id="div3" style="border: 3px solid Black;"></div><br/>
	<div id="div4" style="border: 3px solid Red;"></div><br/>
	<input type="button" value="案例1，jQuery中的ajax()方法" onclick="testAjax1();">
	<br/><br/>
	<input type="button" value="案例2，jQuery中的ajax()方法" onclick="testAjax2();">
	<br/><br/>
	<input type="button" value="案例3，jQuery中的ajax()方法" onclick="testAjax3();">
	<br/><br/>
	姓名：<input id="u_name" type="text"><br/>
	年龄：<input id="u_age" type="text"><br/>
	爱好：<input id="u_hobby" type="text"><br/>
	<input type="button" value="案例4，jQuery中的ajax()方法" onclick="testAjax4();">
	<br/><br/>
	<form id="form1" action="">
	收款人:<input id="name" type="text" value="令狐冲"><br/>
	金额:<input id="money" type="text" value="15680.23"><br/>
	<input id="submit1" type="submit" value="转账" style="background: #8E388E; color: white;">
	<input id="btn1" type="button" value="跨行转账" onclick="alert('hello');">
	</form>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function testLoad1(){
	$('#div1').load('demo_test.txt');
}

function testLoad2(){
	$("#div2").load("demo_test.txt #p1");
}

function testLoad3(){
$("#div3").load('demo_test.txt', function(responseTxt, statusTxt, xhr) {
		if (statusTxt == "success") {
			alert("外部内容加载成功!" + responseTxt);
		}
		if (statusTxt == "error") {
			alert("Error:" + xhr.status + " " + xhr.statusText);
		}
	});
}

function testLoad4(){
	var URL = 'TestAjax';
	var data = 'u=weixiaobao&age=18&hobby=money';
		data = {"name":"zhangwuji", "email":"zhangwuji@qq.com"};
		data.salary = 25632.78;
		data.hometown = "江西省赣州市于都县";
$('#div4').load(URL,data,function(serverReturnData){
	alert(serverReturnData);
});
}

function testAjax1(){
	var parameters = {
		type : "get",
		url : "test.js",
		dataType : "script",
		success : function(serverReturnData) {
			console.log(serverReturnData);
			console.log(typeof serverReturnData);
		}
	};
	console.log(parameters, typeof parameters);
	$.ajax(parameters);
}

function testAjax2(){
	var parameters = {
		type : "get",
		url : "demo_test.txt",
// 		dataType : "text",
		success : function(serverReturnData) {
			console.log(serverReturnData);
			console.log(typeof serverReturnData);
		}
	};
	console.log(parameters, typeof parameters);
	$.ajax(parameters);
}

function testAjax3(){
var URL = 'TestAjax';
var parameters = {
		type : "get",
		data : {"myName":"韦小宝", "myEmail":"weixiaobao@163.com"},
// 		data : "uName=weixiaobao&age=17&hobby=girl",
		dataType : "json",
		success : function(serverReturnData) {
			console.log('******', serverReturnData);
			console.log('******', typeof serverReturnData);
		}
	};
	console.log('======', parameters, '======', typeof parameters);
	$.ajax(URL, parameters);
}

function testAjax4(){
var parameters = {
			type : "get",
			url : 'TestAjax',
// 			data : {"myName":"韦小宝", "myEmail":"weixiaobao@163.com"},
data : "uName=" + $('#u_name').val() + "&age=" + $('#u_age').val() + "&hobby=" + $('#u_hobby').val(),
			dataType : "json",
			success : function(serverReturnData) {
				console.log('******', serverReturnData);
				console.log('******', typeof serverReturnData);
			}
		};
console.log('======', parameters, '======', typeof parameters);
$.ajax(parameters);
}

$('#form1').submit(function(){
var params = {
        'type':'post',
        'data':'userName=' + $('#name').val() + '&money=' + $('#money').val(),
        'success' : function(serverReturnData){
            alert(serverReturnData);
        }
    };
$.ajax('TestAjax' , params);
$('#btn1').prop('disabled' , true);
$('#btn1').prop('value' , '禁用中.....');
//表单一点击提交按钮(submit)必然跳转页面，如果表单的action为空也会跳转到自己的页面，即效果为刷新当前页。
//参考网页https://blog.csdn.net/weixin_42470791/article/details/82392142
return false;//阻止表单的提交行为，如果没有这行代码的话，一点提交按钮，页面将会发生跳转
});

/*
jQuery是个工具，既然是个工具，那该工具的api就可能随时在变化，所以你今天写的jQuery代码，在1年后可
能效果会不一致，所以你最好是去jQuery官网看它官方的api文档，以它官方api文档为准。
*/

//注意：ajaxStart()、ajaxSuccess()这几个函数,从jQuery1.8版本后只能绑定在document节点上
$(document).ajaxStart(function(){
	console.log('监测到有ajax在执行**************');
	$('#messageBox').css('display', '');
	$('#messageBox').hide(20000);
	//禁用按钮，防止重复提交
	$('#submit1').prop('disabled' , true);
// 	$('#submit1').prop('value' , '处理中.....');
	$('#submit1').attr('value' , '处理中,请耐心等待.....');
});
</script>
</html>

function test(){
	console.log('我是test()函数');
}

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);
	}
}

<h2>jQuery学习ing</h2>
<p id="p1">江西省赣州市于都县</p>

程宇寒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery学习28篇(ajax方法)

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JQuery学习28篇(ajax方法)</title><link rel="stylesheet" type="text/css" href="inp...
复制链接

扫一扫