jQuery中的Ajax

最新推荐文章于 2023-01-21 08:00:00 发布

聪聪的学习笔记

最新推荐文章于 2023-01-21 08:00:00 发布

阅读量69

点赞数

分类专栏： Ajax jQuery 文章标签： ajax jquery

本文链接：https://blog.csdn.net/weixin_42773097/article/details/120378217

版权

jQuery 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

Ajax

2 篇文章 0 订阅

订阅专栏

1.JSON

前后端数据交互
在这里插入图片描述
什么是JSON?
定义：JSON是轻量级的，基于JavaScript编程语言，使用键值对封装数据的数据交换格式。
全称：JavaScript Object Notation,译为“JS对象简谱”，一种轻量级的数据交换格式。
JSON语法规则

对象表示为键值对
多个数据用逗号隔开
花括号保存对象
方括号保存数组

例题：使用异步任务完成校验（如果文本框中输入的用户名，已经存在，则有提示信息，且不能点击提交按钮。不使用表单提交的方式）

package controller;

import java.io.IOException;
import java.io.PrintWriter;

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

/**
 * Servlet implementation class TestRegedit
 */
@WebServlet("/TestRegedit")
public class TestRegedit extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public TestRegedit() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String name = request.getParameter("username");
		PrintWriter pw = response.getWriter();
		
		if("admin".equals(name)) {
			pw.print(false);//该用户名不可注册
		}else {
			pw.print(true);
		}
		pw.flush();
		pw.close();
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){//文档就绪
		doCheck = function(){
			name = $("#username").val();//获得文本框中的内容
			$.get("TestRegedit?username="+name,function(data){
				if(data == 'false'){//用户名重复
					$("#msg").text("**该用户已经存在！");
					$("#btn_r").attr("disabled","disabled");//如果用户名已经存在，让按钮是不可点击的状态
				}else{
					$("#btn_r").removeAttr("disabled");
				}
			});
		}
	});
</script>
</head>
<body>
	<h1>用户注册</h1>
	用户名：<input id="username" type="text" size="12" onblur="doCheck();"/><span id="msg" style="color:red;"></span><br/>
	密码：<input type="password" size="12"/><br/>
	<input id="btn_r" type="button" value="注册"/>
</body>
</html>

在这里插入图片描述

聪聪的学习笔记

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery中的Ajax

1.JSON前后端数据交互什么是JSON?定义：JSON是轻量级的，基于JavaScript编程语言，使用键值对封装数据的数据交换格式。全称：JavaScript Object Notation,译为“JS对象简谱”，一种轻量级的数据交换格式。JSON语法规则对象表示为键值对多个数据用逗号隔开花括号保存对象方括号保存数组例题：使用异步任务完成校验（如果文本框中输入的用户名，已经存在，则有提示信息，且不能点击提交按钮。不使用表单提交的方式）package controlle
复制链接

扫一扫