Ajax的使用

weixin_45979978

于 2023-01-11 17:15:13 发布

阅读量90

点赞数

文章标签： ajax servlet javascript

本文链接：https://blog.csdn.net/weixin_45979978/article/details/128648012

版权

Ajax

Asynchronous JavaScript And XML

异步JavaScript和XML

一种数据交互方法，请求和响应是异步的。

使用ajax能实现在整个页面不重新加载的情况下，更新局部内容。

使用

浏览器都支持异步提交，原生的JavaScript就能实现ajax，但使用极不方便，所以都是使用jquery封装后的** $. aja x () * * 或$ .get() $.post()等函数。

1、在页面中导入jquery文件

<!--使用ajax需要导入jquery-->
	<script src="jquery文件路径"></script>

2、在script标签中写ajax

<script>
    某个节点.事件(function(){
        //使用ajax异步提交数据
        $.ajax({
            //访问的URL地址
            url:"servlet映射或具体url",
            //提交的方式
            type:"post/get/put/delete",
            //提交的数据
            data:{
                //键：值
                "形参":值,
                "形参":值
            },
            //url访问成功后的回调函数
            success:function(res){//res表示访问URL后返回的数据
                
            },
            //访问url失败时的回调函数
            error:function(){
                
            }
        })
    })
</script>

具体例子

<html>
    

<body>
    <div id="login">
	<input id="username" type="text" name="phone" required placeholder="请输入用户名"/><br><br>
	<input id="password" type="password" name="password" required placeholder="请输入密码"/>
	<input id="submit" type="button" value="登&nbsp;&nbsp;录">
	</div>
</body>

<!--使用ajax需要导入jquery-->
	<script src="../system/bootstrap-3.4.1-dist/js/jquery-3.6.2.min.js"></script>
	<script>
		/*action="http://localhost:8080/Library/customer"*/
		/*文档就绪*/
		$(function () {
			//如果是普通按钮，需要写单击事件
			$("#submit").click(function () {
				//获取输入的信息
				let phone = $("input[name=phone]").val();
				let password = $("input[name=password]").val();
				if(phone==""||password==""){
					alert("输入不能为空");
					return;
				}
				//使用ajax提交登录信息
				$.ajax({
					//请求地址
					url:"http://localhost:8080/Library/customer",
					//提交方式
					type:"post",
					//提交数据
					data:{
						"op":"login",
						"phone":phone,
						"password":password},
					//访问成功(能正常访问指定地址)后的回调函数
					success:function (res) {
						if(res=="error"){
							alert("用户名或密码错误")
						}else {
							location.href="http://localhost:8080/Library/bookInfo?op=queryByCondition";
						}
					}

				});

			});
			//如果是表单，需要写表单提交事件
			$("form:eq(0)").submit();

		});
	</script>
</html>