Ajax

最新推荐文章于 2024-08-26 17:07:20 发布

流年丿往昔

最新推荐文章于 2024-08-26 17:07:20 发布

阅读量124

点赞数

文章标签： ajax servlet json

本文链接：https://blog.csdn.net/StruggleBamboo/article/details/115263058

版权

Ajax

一、Ajax
二、代码
总结

一、Ajax

二、代码

1.地区的选择案例：
area.jsp:


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>区域展示</title>
    <script src="/ajax/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<select name="" id="prov">
    <option value="-1">--请选择省份--</option>
</select>
<select name="" id="city">
    <option value="-1">--请选择城市--</option>
</select>
<select name="" id="area">
    <option value="-1">--请选择区--</option>
</select>

</body>
<script>
    //1.填充省份
    $.get("/ajax/area",{pid:0},function (data) {
        console.log(data)
        data.forEach(function (e,i) {
            $('#prov').append('<option value="'+e.id+'">'+e.name+'</option>')
        })
    },"json")
    //2.根据选中的某个省份，填充相应的城市
    $("#prov").change(function () {
        //清空上次的操作的结果
        $('#city').html('<option value="-1">--请选择城市--</option>')
        $.get("/ajax/area",{pid:this.value},function (data) {
            data.forEach(function (e,i) {
                $('#city').append('<option value="'+e.id+'">'+e.name+'</option>')
            })
        },"json")

    })
    //3.根据选中的某个城市，填充相应的区县
    $("#city").change(function () {
        //清空上次的操作的结果
        $('#area').html('<option value="-1">--请选择区--</option>')
        $.get("/ajax/area",{pid:this.value},function (data) {
            data.forEach(function (e,i) {
                $('#area').append('<option value="'+e.id+'">'+e.name+'</option>')
            })
        },"json")
    })

</script>
</html>

servlet:

package com.web;

import com.alibaba.fastjson.JSON;
import com.c3p0.pojo.Area;
import com.c3p0.service.IAreaService;
import com.c3p0.service.impl.AreaServiceImpl;

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.util.List;

@WebServlet("/area")
public class AreaServlet extends HttpServlet {
    private IAreaService service=new AreaServiceImpl();

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.获取参数pid
        String pid = request.getParameter("pid");
        //2.查询数据库中
        List<Area> areas=service.findArea(pid);
        System.out.println(areas);
        //3.使用fastJson工具包，将集合数据转换成json数据
        String areas_json = JSON.toJSONString(areas);
        System.out.println(areas_json);
        //4.response响应json数据
        response.setContentType("application/json;charset=UTF-8");
        response.getWriter().write(areas_json);
    }
}

AjaxServlet:

package com.web;

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;

@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String name = req.getParameter("name");
        //设置响应编码
        resp.setContentType("text/html;charset=UTF-8");
        if (name.equals("tom")){//用户名已存在
            resp.getWriter().write("用户名已存在");
        }else {//用户名正常
            resp.getWriter().write("用户名正常");
        }
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String name = request.getParameter("name");

        //设置响应编码
        response.setContentType("text/html;charset=UTF-8");
        if (name.equals("tom")){//用户名已存在
            response.getWriter().write("{\"msg\":\"用户名已存在\",\"color\":\"red\"}");
        }else {//用户名正常
            response.getWriter().write("{\"msg\":\"用户名正常\",\"color\":\"green\"}");
        }
    }
}

js实现Ajax：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>用户注册</title>
  </head>
  <body>
  <form action="">
    姓名: <input type="text" name="name" value="" onblur="checkName(this.value)">
    <span id="sp"></span><br>
    年龄: <input type="text" name="age"><br>
    邮箱: <input type="text" name="email"><br>
    <input type="submit" value="注册">
  </form>
  </body>
  <script>
    function checkName(name) {
      //1.创建一个可以发送异步请求的js对象
      var req = new XMLHttpRequest();
      //2.发送请求 get
      /*req.open("GET","/ajax/AjaxServlet?name="+name);
      req.send();*/
        req.open("POST","/ajax/AjaxServlet?name="+name);
        req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        req.send("fname=Bill&lname=Gates");
      //3.请求到达服务器,服务器处理请求并响应数据
      //4.等到服务器响应就绪,接收响应数据
      req.onreadystatechange=function (ev) {
        if (req.readyState==4&&req.status==200){
          document.getElementById("sp").innerText=req.responseText;
        }
      }
    }
  </script>
</html>

jq实现Ajax：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>使用jq来实现ajax</title>
</head>
<script src="/ajax/js/jquery-3.3.1.min.js"></script>
<body>
<form action="">
    姓名: <input type="text" name="name" value="" onblur="checkName(this.value)">
    <span id="sp"></span><br>
    年龄: <input type="text" name="age"><br>
    邮箱: <input type="text" name="email"><br>
    <input type="submit" value="注册">
</form>
</body>
<script>
function checkName(v) {
   /* $.ajax({
        url:'/ajax/AjaxServlet',
        data:'name='+v,
        type:'GET',
        success:function (msg) {
            $('#sp').text(msg)
        },
        error:function () {
            console.log('异步请求发送失败')
        }
    })*/
    $.get('/ajax/AjaxServlet',{name:v},function (date) {
        $('#sp').text(date.msg).css("color",date.color)
    },"json")
}
</script>
</html>

总结

以上就是Ajax的全部内容,主要是分为js和jq两种方式来进行异步请求的。

流年丿往昔

关注

0
点赞
踩
0

收藏

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

Ajax一、Ajax二、代码总结一、Ajax二、代码1.地区的选择案例：area.jsp:<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title>区域展示</title> <script src="/ajax/js/jquery-3.3.1.min.js"></script>&l
复制链接

扫一扫