本文介绍: AJAXHTML + AJAX 可以替换JSP大概就是前后分离ajax特点1、与服务器进行数据交换通过AJAX可以服务器发送请求服务器数据直接响应回给浏览器。2、异步交互可以在不重新加载整个页面的情况下,与服务器交换数据更新部分网页技术ajax代码的某些意义上是死的,后续有插件会方便更多在HTML页面中<script> //1. 给用户名输入框绑定 失去焦点事件 document.getElementById(“username“)

AJAX

HTML + AJAX 可以替换JSP
大概就是前后分离

ajax特点

1、与服务器进行数据交换通过AJAX可以给服务器发送请求服务器将数据直接响应回给浏览器
2、异步交互:可以在不重新加载整个页面的情况下,与服务交换数据并更新部分网页技术

请添加图片描述
请添加图片描述
ajax代码的某些意义上是死的,后续有插件会方便更多
在HTML页面

<script>

    //1. 给用户名输入框绑定 失去焦点事件
    document.getElementById("username").onblur = function () {
        //2. 发送ajax请求
        // 获取用户名的值
        var username = this.value;

        //2.1. 创建核心对象
        var xhttp;
        if (window.XMLHttpRequest) {
            xhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2.2. 发送请求
        xhttp.open("GET", "http://localhost:80/selectNameMatching?username="+username);
        xhttp.send();

        //2.3. 获取响应
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                //alert(this.responseText);
                //判断
                if(this.responseText == "true"){
                    //用户名存在显示提示信息
                    document.getElementById("username_err").style.display = '';
                }else {
                    //用户名存在 ,清楚提示信息
                    document.getElementById("username_err").style.display = 'none';
                }
            }
        };

    }




</script&gt;

主要三步
1、创建对象

    xhttp = new XMLHttpRequest(); } else {
    // code for IE6, IE5
    xhttp = new ActiveXObject("Microsoft.XMLHTTP"); } ```

2获取请求

```bash //建立连接 xhttp.open("GET",
"http://localhost:8080/ajax-demo/ajaxServlet"); //发送请求 xhttp.send();

3、获取响应

    if (this.readyState == 4 &amp;&amp; this.status == 200) {
        // 通过 this.responseText 可以获取服务端响应的数据
        alert(this.responseText);
    } }; ```
Axios原生的AJAX进行封装简化书写

官网https://www.axioshttp.cn

在HTML里

 <script src="js/axios-0.18.0.js"&gt;</script&gt;
axios({
    method:"get",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan" }).then(function (resp){
    alert(resp.data); })

axios({
    method:"post",
    url:"http://localhost:8080/ajax-demo/axiosServlet",
    data:"username=zhangsan"
}).then(function (resp) {
    alert(resp.data);
})
axios.get("http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan").then(function (resp) {
    alert(resp.data);
});

axios.post("http://localhost:8080/ajax-demo/axiosServlet","username=zhangsan").then(function (resp) {
    alert(resp.data);
})

axios() 是用来发送异步请求的,小括号使用 js 对象传递请求相关参数

JSON

格式
{    "name":"zhangsan",   
	 "age":23,   
 	 "city":"北京"}
var jsonStr = '{"name":"zhangsan","age":23,"addr":["北京","上海","西安"]}'
json字符串对象转换
<script>
    //1. 定义JSON字符var jsonStr = '{"name":"zhangsan","age":23,"addr":["北京","上海","西安"]}'
    alert(jsonStr);

    //2. 将 JSON 字符串转为 JS 对象
    let jsObject = JSON.parse(jsonStr);
    alert(jsObject)
    alert(jsObject.name)
    //3. 将 JS 对象转换为 JSON 字符串
    let jsonStr2 = JSON.stringify(jsObject);
    alert(jsonStr2)
</script>
Fastjson
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.62</version>
</dependency>

JAVA对象转json
String jsonStr = JSON.toJSONString(obj);

JSON字符串转Java对象 User user = JSON.parseObject(jsonStr, User.class);

查询所有 数据转成json

@WebServlet("/selectAllServlet")
public class SelectAllServlet extends HttpServlet {
    private BrandService brandService = new BrandService();

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. 调用Service查询
        List<Brand> brands = brandService.selectAll();

        //2. 将集合转换为JSON数据   序列化
        String jsonString = JSON.toJSONString(brands);

        //3. 响应数据  application/json   text/json
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().write(jsonString);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

添加 json数据转java对象 存

@WebServlet("/addServlet")
public class AddServlet extends HttpServlet {

    private BrandService brandService = new BrandService();

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //1. 接收数据,request.getParameter 不能接收json的数据
       /* String brandName = request.getParameter("brandName");
        System.out.println(brandName);*/

        // 获取请求体数据
        BufferedReader br = request.getReader();
        String params = br.readLine();
        // 将JSON字符串转为Java对象
        Brand brand = JSON.parseObject(params, Brand.class);
        //2. 调用service 添加
        brandService.add(brand);
        //3. 响应成功标识
        response.getWriter().write("success");
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

原文地址:https://blog.csdn.net/qq_45764141/article/details/123960002

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_31586.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注