简单使用ajax

最新推荐文章于 2023-04-28 09:58:11 发布

解解深入人心

最新推荐文章于 2023-04-28 09:58:11 发布

阅读量227

点赞数

文章标签： ajax jquery 服务器

本文链接：https://blog.csdn.net/weixin_56162501/article/details/124896319

版权

本文详细介绍了如何在网页中使用jQuery库进行AJAX GET和POST请求，包括GET请求的例子，并展示了如何结合服务器端Servlet进行数据交互。随后，通过实例演示了如何在表单验证中运用AJAX进行手机号码的验证，涉及CheckPhoneServlet的实现。

摘要由CSDN通过智能技术生成

简单的使用ajax

借助jquery: https://jquery.cuishifeng.cn/
(1) 在网页中引入jquery库

    <!--引入jquery库-->
    //注意: <script>必须使用双标签
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>

(2)ajax的语法:—get提交方式。 [] 表示可有可无。

	jQuery.get(url, [data], [callback], [type])
	jQuery.post(url, [data], [callback], [type])
	get|post:表示提交方式.
	    url: 服务器路径
	    data: 向服务器发送请求时携带的参数。
	    callback: 回调函数， 当服务器响应结果时，会调用的函数。
	    type: 指定服务器响应的数据类型。

例子:

<html>
  <head>
    <title>$Title$</title>
    <!--引入jquery库-->
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
  </head>
  <body>
     <%--作用:让你看看浏览器有没有刷新页面--%>
     <%=new Date()%><br>
     <input type="button" onclick="ajax01()" value="点击"/>
  </body>
  <script>
        function ajax01(){
              //ajaxServlet01表示服务器路径  {name:ykq,age:18}请求的参数  function(result){回调函数 result服务响应的数据}
              $.get("ajaxServlet01",{"name":"ykq","age":18},function(result){
                     alert(result); //弹出服务器响应的结果
              });
        }
  </script>
</html>

servlet

package com.aaa.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet(name = "AjaxServlet",urlPatterns = "/ajaxServlet01")
public class AjaxServlet extends HttpServlet {


    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //接受请求参数
        String name = req.getParameter("name");
        String age = req.getParameter("age");
        System.out.println("name===="+name);
        System.out.println("age===="+age);

        //响应客户端数据。
        PrintWriter out = resp.getWriter();//获取out对象。
        out.print("hello ajax");//()中的内容就是响应给客户端的内容。

        //关闭输出对象
        out.flush();
        out.close();
    }
}

做一个简单的手机验证

<html>
<head>
    <title>Title</title>
    <!--引入jquery库-->
   “
</head>
<body>
     <form action="/zcServlet" method="post">
            账号:<input type="text" name="username"/><br>
            密码:<input type="text" name="password"/><br>
            手机号:<input type="text" id="phone" name="phone" onblur="ckPhone()"/><span id="phoneMsg"></span><br>
            <input type="submit" value="注册"/>
     </form>

<script>
    /*get和post
        get地址栏可以看到提交的数据
        post地址栏看不到提交的数据

     ajax的提交方式和表单没有关系。
    * */
       function ckPhone(){
            var phone=$("#phone").val();  //id选择器: 通过id查询到dom元素 val():获取输入框输入的值
            //ajax也是与服务器交互的一种方式。服务器那段不在跳转页面 而是响应数据。
            $.post("CheckPhoneServlet",{"phone":phone},function(result){
                    //ajax会根据服务器响应的结果 做一些业务操作。
                    $("#phoneMsg").html(result);
            });
       }
</script>
</body>
</html>

package com.aaa.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet(name = "CheckPhoneServlet",urlPatterns = "/CheckPhoneServlet")
public class CheckPhoneServlet extends HttpServlet {

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       req.setCharacterEncoding("utf-8");
       resp.setCharacterEncoding("utf-8");
        //接受手机号
        String phone = req.getParameter("phone");
        PrintWriter out = resp.getWriter();
        //查询数据库是否存在该手机号.
        if("xxxxxx".equals(phone)){
           out.print("<font color='red'>改手机号已经被注册</font>");
        }else{
            out.print("<font color='green'>该手机号可以使用</font>");
        }

        out.flush();
        out.close();
    }
}

解解深入人心

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
简单使用ajax

简单的使用ajax借助jquery: https://jquery.cuishifeng.cn/(1) 在网页中引入jquery库  //注意: <script>必须使用双标签 <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>(2)ajax的语法:—get提交方式。 [] 表示可有可无。 jQuery
复制链接

扫一扫