ajax跨域查询图书列表

最新推荐文章于 2023-06-30 10:38:21 发布

小小舍

最新推荐文章于 2023-06-30 10:38:21 发布

阅读量483

点赞数 1

CC 4.0 BY-SA版权

分类专栏： ajax

本文链接：https://blog.youkuaiyun.com/qq_43560721/article/details/84038096

ajax 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了解决AJAX跨域请求的三种方式：JSONP、CORS及转发请求，并通过实例展示了如何使用CORS实现跨域访问图书列表，完成前后端分离。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ajax跨域请求解决问题有三种方式

1.jsonp（这里会用到callback，它只能解决get请求，对post无能为力）

2.cors（以下会用到此方式）

3.转发请求（nginx可以解决跨域问题）

首先我们把需要访问的数据库和表建好

在数据库插两条数据，方便我们之后查询。

然后搭建框架且实现功能

把项目所需的包放在lib下

写配置文件web.xml（配置过滤器和json跨域所需）

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
  <filter>
  <filter-name>json</filter-name>
  <filter-class>com.xxs.filter.MyFilter</filter-class>
  </filter>
  <filter>
  <filter-name>struts2</filter-name>
  <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
  </filter>
  <filter-mapping>
  <filter-name>json</filter-name>
  <url-pattern>/*</url-pattern>
  </filter-mapping>
  <filter-mapping>
  <filter-name>struts2</filter-name>
  <url-pattern>/*</url-pattern>
  </filter-mapping>
</web-app>

浏览器为了安全问题，设置了 javascript的同源策略。什么是同源策略呢，就是请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同。

response.addHeader("Access-Control-Allow-Origin", "*") ，* 是一个域名通配符，代表这所有的网站，意识是任何的网站都能访问这个资源，其他的，我们还能填写一个具体的url ，就只有我们设置的url 能够访问。在我们发送一个post 请求之前，浏览器会先发送一个options请求，在这个options 请求里边， header 会带上origin还有Access-Control-Request-*:**之类的头。然后，服务器也会返回相应的access-control-allow-origin，如果返回的access-control-allow-origin 是一个 * , 或这个可以匹配当前网站的一个表达式，这个时候，浏览器才会去真正的发送这个请求，否则的话，浏览器自己就会把这个请求给过滤掉。

所以实际上我们可以通俗的理解为，告诉浏览器，访问的请求就不要多管闲事了。

在当前这个例子里我们可以直接用 response.addHeader("Access-Control-Allow-Origin", "http://localhost:63342");实现跨域。

具体一点的话代码如下：

package com.xxs.filter;

import java.io.IOException;
import java.net.URL;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.lang3.StringUtils;
public class MyFilter implements Filter {

	public void destroy() {
		
	}
	public void doFilter(ServletRequest req, ServletResponse resp,
			FilterChain filterChain) throws IOException, ServletException {
		//告诉浏览器 访问的请求就不要多管闲事了
		
		HttpServletRequest request = (HttpServletRequest) req;
		HttpServletResponse response =(HttpServletResponse)resp;
		
		String referer = request.getHeader("referer");
		System.out.println("referer:"+referer);
		
		if(StringUtils.isNotBlank(referer)){			
			URL url = new URL(referer);
			String origin= url.getProtocol()+"://"+url.getHost()+":"+url.getPort();
			System.out.println("origin:"+origin);
			response.addHeader("Access-Control-Allow-Origin", origin);
		}else{
			response.addHeader("Access-Control-Allow-Origin", "*");
		}		
		filterChain.doFilter(request, response);
	}
	public void init(FilterConfig arg0) throws ServletException {
	
	}
}

完成了跨域的配置接下来就是有关图书列表的bean，action，service，dao，还有连接数据库的util等

Book.java(它其实就是一个封装类，主要是get，set等方法）

package com.xxs.bean;

public class Book {

	private int id;
	private String bookName;
	private String bookAuthor;
	private String bookPublish;
	private String bookIsbn;

	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	public String getBookName() {
		return bookName;
	}

	public void setBookName(String bookName) {
		this.bookName = bookName;
	}

	public String getBookAuthor() {
		return bookAuthor;
	}

	public void setBookAuthor(String bookAuthor) {
		this.bookAuthor = bookAuthor;
	}

	public String getBookPublish() {
		return bookPublish;
	}

	public void setBookPublish(String bookPublish) {
		this.bookPublish = bookPublish;
	}

	public String getBookIsbn() {
		return bookIsbn;
	}

	public void setBookIsbn(String bookIsbn) {
		this.bookIsbn = bookIsbn;
	}

	public Book() {
		super();
	}

	public Book(int id, String bookName, String bookAuthor, String bookPublish,
			String bookIsbn) {
		super();
		this.id = id;
		this.bookName = bookName;
		this.bookAuthor = bookAuthor;
		this.bookPublish = bookPublish;
		this.bookIsbn = bookIsbn;
	}

	@Override
	public String toString() {
		return "Book [bookAuthor=" + bookAuthor + ", bookIsbn=" + bookIsbn
				+ ", bookName=" + bookName + ", bookPublish=" + bookPublish
				+ ", id=" + id + "]";
	}

}

BookService.java（它是一个接口）

主要代码为：
public List<Book> selectBooks();

BookServiceImpl.java（BookService接口的实现）

主要代码为：

public class BookServiceImpl implements BookService{
   public List<Book> selectBooks() {
       // TODO 从数据库获取内容进行数据组织
       BookDao bookDao = new BookDaoImpl();
       List<Book> books = bookDao.selectBooks();
       return books;
   }
}

BookDao.java（它也是一个接口，和BookService.java代码一样）

主要代码为：

public List<Book> selectBooks();

BookDaoImpl.java（BookDao接口的实现）

主要代码为：

package com.xxs.dao.impl;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import com.xxs.bean.Book;
import com.xxs.dao.BookDao;
import com.xxs.util.DBUtil;

public class BookDaoImpl implements BookDao{

	public List<Book> selectBooks() {
		// TODO 这个地方和数据库真正打交道
		Connection conn = DBUtil.getConn();
		String sql = "select * from book";
		
		PreparedStatement ps = null;
		ResultSet rs = null;
		
		List<Book> books = new ArrayList<Book>();
		try {
			ps = conn.prepareStatement(sql);
			rs = ps.executeQuery();
			while(rs.next()){
				Book book = new Book();
				book.setId(rs.getInt(1));
				book.setBookName(rs.getString(2));
				book.setBookAuthor(rs.getString(3));
				book.setBookPublish(rs.getString(4));
				book.setBookIsbn(rs.getString(5));
				books.add(book);
			}
			
		} catch (SQLException e) {
			e.printStackTrace();			
		}finally{
			DBUtil.closeConn(conn, ps, rs);
		}		
		return books;
	}
}

（当然了，也可以不写dao层，直接在BookServiceImpl.java里实现BookDaoImpl.java所实现的功能，看个人喜好）

DBUtil.java（连接数据库）

package com.xxs.util;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

public class DBUtil {

	public static Connection getConn() {

		String url = "jdbc:sqlserver://localhost:1433;databaseName=MyDB";
		String user = "sa";
		String pwd = "1";
		Connection conn = null;

		try {
			Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
			conn = DriverManager.getConnection(url, user, pwd);
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (ClassNotFoundException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return conn;
	}

	public static void closeConn(Connection conn, PreparedStatement ps,
			ResultSet rs) {

		try {
			if (conn != null) {
				conn.close();
			}
		} catch (SQLException e) {

			e.printStackTrace();
		}

		try {
			if (ps != null) {
				ps.close();
			}
		} catch (SQLException e) {

			e.printStackTrace();
		}

		try {
			if (rs != null) {
				rs.close();
			}
		} catch (SQLException e) {

			e.printStackTrace();
		}

	}

}

不能忘了struts文件的配置

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
	"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
	"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
	<package name="book" namespace="/book" extends="json-default">
		<action name="getBookJsonOld" class="com.xxs.action.BookAction"
			method="getBookJsonOld" />
			
		<action name="getBookJson" class="com.xxs.action.BookAction"
			method="getBookJson" >			
			<result type="json">
			<!-- 展示给用户的bean对象 -->
			<param name="root">book</param>			
			</result>
		</action>	
						
		<action name="getBooksList" class="com.xxs.action.BookAction"
			method="getBooksList" >			
			<result type="json">
			<param name="root">books</param>			
			</result>
		</action>
	</package>
</struts>

项目结构图：

项目效果图：

在webstorm的url里添加上图地址栏的路径：

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $.ajax({
                type:"post",
                url:"http://127.0.0.1:8080/JsonProject/book/getBooksList",
                success:function(obj){
                    $.each(obj,function(index,book){
                        var bookStr = "<tr><td>" + book.id + "</td><td>" + book.bookName + "</td><td>" + book.bookAuthor + "</td><td>" + book.bookPublish + "</td><td>" + book.bookIsbn + "</td></tr>";
                        $('table').append(bookStr);
                    });
                }
            });
        });
    </script>
    <style>
        table ,td ,th{
            border:1px solid pink ;
        }
    </style>
</head>
<body>
<table>
    <thead>
    <tr>
        <th>编号</th>
        <th>书名</th>
        <th>作者</th>
        <th>出版社</th>
        <th>Isbn</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>
</body>
</html>

主要代码也可以写为

<script type="text/javascript">
    $(function(){
        $.ajax({
            type:"post",
            url:"http://127.0.0.1:8080/JsonProject/book/getBooksList",
            success:function(obj){
                var bookStr ="";
                $.each(obj,function(index,book){
                    bookStr += "<tr><td>" + book.id + "</td><td>" + book.bookName + "</td><td>" + book.bookAuthor + "</td><td>" + book.bookPublish + "</td><td>" + book.bookIsbn + "</td></tr>";
                });
                $('table').append(bookStr);
            }
        });
    });
</script>

主要代码还可以写为：

<script type="text/javascript">
    $(function(){
        $.ajax({
            type:"post",
            url:"http://127.0.0.1:8080/JsonProject/book/getBooksList",
            success:function(obj){
                $.each(obj,function(index,book){
                    var bookArray = [book.id,book.bookName,book.bookAuthor,book.bookPublish,book.bookIsbn];
                    for(var i=0;i<bookArray.length;i++){
                        $("table>tbody>tr:eq("+index+")>td:eq("+i+")").html(bookArray[i]);
                    }
                });
            }
        });
    });
</script>

（前两种都用了拼接字符串，不同所在就是前者是拼接一个追加在一个，后者是拼接完再追加。第三种用了循环的方式）

在webstrom里运行效果图如下：