利用ajax实现数据传输

Posted 2020-09-02 Claricre

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了利用ajax实现数据传输相关的知识，希望对你有一定的参考价值。

　　AJAX = Asynchronous javascript and XML（异步的 JavaScript 和 XML）。

　　AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

　　AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

　　传递对象时，可以分为传输单个对象或者值，还有传递数组或集合。

首先新建一个数据层：

package com.bean;

public class Dog {
    private String name;
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getAge() {
        return age;
    }
    public void setAge(int age) {
        this.age = age;
    }
    public String getCategory() {
        return category;
    }
    public void setCategory(String category) {
        this.category = category;
    }
    private int age;
    private String category;
}

新建一个servlet进行页面功能实现：

package com.servlet;

import java.io.IOException;
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 com.bean.Dog;

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

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        //response.getWriter().append("Served at: ").append(request.getContextPath());
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        Dog d = new Dog();
        d.setName("小白");
        d.setAge(3);
        d.setCategory("土狗");
        
        response.getWriter().append("<?xml version=\'1.0\'?>");
        response.getWriter().append("<pet>");
        response.getWriter().append("<name>"+d.getName()+"</name>");
        response.getWriter().append("<name>"+d.getAge()+"</name>");
        response.getWriter().append("<name>"+d.getCategory()+"</name>");
        response.getWriter().append("</pet>");
        
    }

    /**
     * @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);
    }

}

新建jsp页面实现ajax：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#d1").click(function(){
        $.ajax({
            url:"testajax1",
            data:{},
            type:"POST",
            dataType:"XML",
            success:function(httpdata){
                var n = $(httpdata).find("name").text();
                var a = $(httpdata).find("age").text();
                var c = $(httpdata).find("category").text();
                
                $("#d2").append("<p>"+n+"</p>");
                $("#d2").append("<p>"+a+"</p>");
                $("#d2").append("<p>"+c+"</p>");
            }
        });
    });
    
});

</script>
</head>
<body>
<div id="d1">aaaa</div>
<div id="d2"></div>
</body>
</html>

效果如下：

取数组或集合时：

package com.servlet;

import java.io.IOException;
import java.util.ArrayList;

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 com.bean.Dog;

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

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        //response.getWriter().append("Served at: ").append(request.getContextPath());
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        Dog d1 = new Dog();
        d1.setName("狗1");
        d1.setAge(1);
        d1.setCategory("品种1");
        Dog d2 = new Dog();
        d2.setName("狗2");
        d2.setAge(2);
        d2.setCategory("品种2");
        Dog d3 = new Dog();
        d3.setName("狗3");
        d3.setAge(3);
        d3.setCategory("品种3");
        
        ArrayList<Dog> list = new ArrayList<Dog>();
        list.add(d1);
        list.add(d2);
        list.add(d3);
        
        response.getWriter().append("<?xml version=\'1.0\'?>");
        response.getWriter().append("<pet>");
        
        for(Dog d:list){
            response.getWriter().append("<dog name=\'"+d.getName()+"\'>");
            
            response.getWriter().append("<age>"+d.getAge()+"</age>");
            response.getWriter().append("<category>"+d.getCategory()+"</category>");
            response.getWriter().append("</dog>");
        }
        
        response.getWriter().append("</pet>");
        
        
    }

    /**
     * @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);
    }

}

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#d1").click(function(){
        
        $.ajax({
            url:"testajax2",
            data:{},
            type:"POST",
            dataType:"XML",
            success:function(httpdata){
                var dogs = $(httpdata).find("dog");
                for(var i=0;i<dogs.length;i++){
                    var n =$(dogs).eq(i).attr("name");
                    var a =$(dogs).eq(i).find("age").text();
                    var c =$(dogs).eq(i).find("category").text();
                    
                    var tr ="<tr>";
                    tr+="<td>"+n+"</td>";
                    tr+="<td>"+a+"</td>";
                    tr+="<td>"+c+"</td>";
                    tr+="</tr>";
                    $("#tb").append(tr);
                }
                
            }
        });
    });
});
</script>
</head>
<body>
<div id="d1">11111</div>
<table id="tb" width="100%" cellpadding="5" cellspacing=\'1\' border="0">
</table>
</body>
</html>

效果如下：

以上是关于利用ajax实现数据传输的主要内容，如果未能解决你的问题，请参考以下文章

前端面试题之手写promise

如何利用原生JS+AJAX在W5500的WEB界面上面实现按键控制单片机IO口

利用ajax实现数据传输

Notepad++编辑器——Verilog代码片段直接编译

利用ajax实现与php数据交互，并局部刷新页面

Swift新async/await并发中利用Task防止指定代码片段执行的数据竞争(Data Race)问题