JQuery中ajax操作和跨站访问详解（后端Django版本）

最新推荐文章于 2025-05-10 13:25:59 发布

T型人小付

最新推荐文章于 2025-05-10 13:25:59 发布

阅读量741

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/Victor2code/article/details/106827958

最近在学习JQuery中的AJAX操作，操作本身比较简单，主要是遇到了跨站访问的一些问题，这里详细记录一下原理和解决思路。

文章目录

- Ajax操作
- 浏览器同源策略
- 跨域操作
- - CORS
  - JSONP
- 总结

Ajax操作

Ajax是一种异步请求服务器数据的技术，可以实现在前端不加载整个网页的情况下更新网页的部分内容。原生的Ajax这里就不讨论了，直接用JQuery，简单而且兼容性强。其中最常用的就是下面的3中方法了

`$.ajax()`

$.ajax({
   name:value, name:value, ... })

执行异步ajax请求，参数是一个字典类型，常用的一些字段如下

字段	说明
url	规定发送请求的 URL，默认是当前页面
type	规定请求的类型（GET 或 POST）
success(result,status,xhr)	当请求成功时运行的函数，三个参数分别是返回的结果，返回状态和xhr
error(xhr,status,error)	如果请求失败要运行的函数
contentType	发送数据到服务器时所使用的内容类型。默认是：“application/x-www-form-urlencoded”
data	规定要发送到服务器的数据
dataType	预期的服务器响应的数据类型

`$.get()`

$.get(URL,data,function(data,status,xhr),dataType)

使用ajax的http get请求从服务器加载数据，这里的参数比较简单，只有URL是必须的，另外几个参数都是可选。

`$.post()`

$(selector).post(URL,data,function(data,status,xhr),dataType)

使用ajax的http post请求从服务器加载数据，参数和get方法一样。

实际操作

一般情况下用$.ajax()就能够满足需求了，下面用一个测试页面来实际操作下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="/static/jquery-3.5.1.js"></script>
    <title>Test Ajax</title>
    <script>
        function login(){
    
            $.ajax({
    
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "http://172.29.56.178/test/hello/" ,//url
                data: $('#form1').serialize(),
                success: function (result) {
    
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result.resultCode == 200) {
    
                        alert(

最低0.47元/天解锁文章