jQuery-Ajax的一点小经验

最新推荐文章于 2024-07-14 10:34:53 发布

ONFE

最新推荐文章于 2024-07-14 10:34:53 发布

阅读量227

点赞数

分类专栏： HTML JavaScript 文章标签： jquery html ajax

本文链接：https://blog.csdn.net/kkkkk22333/article/details/50248209

版权

HTML 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

JavaScript

1 篇文章 0 订阅

订阅专栏

　　前几天给一个师弟做网站前台设计指导，在演示AJAX提交的时候，在桌面上右键新建了一个HTML文件，将表单数据提交到本地配置的站点中的aaa.php文件，测试以失败告终，对url地址检查了一遍又一遍，对于Ajax函数用法也对照了无数遍。实在无奈，就把在服务器上运行的包含ajax提交的页面抓取了下来，修改url指向我的域名。结果还是失败了。由于我并没有系统地学过Jquery，对于Ajax其中的请求细节并不了解，于是我索性将该html文件移动到站点根目录打开。结果实验成功了。于是我再将其提交URL指向我的另一个站点，通用的问题又出现了。于是我初步得出结论：
　　Ajax不能进行跨域提交。

　　test.html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>000</title>
<script type="text/javascript" src="http://www.gdlgxy.net/Public/JS/jquery-1.9.1.min.js"></script>
</head>
<script type="text/javascript">
        function submitNow(){
            $.ajax({
                cache: false,//是否使用缓存
                type: 'POST',//提交方式
                url: 'http://localhost/aaa.php',//提交的地址
                data: $('#f1').serialize(),// 这句话表示对整个表单的内容进行提交
                //如果只提交个别数据，比如只提交用户名，可这样写：
                //data: {name: $("#name").val()},

                //只提交用户名和密码：
                //data: {name: $("#name").val(),pwd: $("#name").val()},

                async: true,//是否异步，此处如果设为false（同步），就会出现刚刚那种网页卡住的情况，直到后台返回数据，网页才不卡。
                error: function(request) {//如果提交失败，则执行下列操作
                    alert("错误状态码："+request.readyState);
                    $("#tjan").val("error");
                    $("#tjan").css("background-color","rgb(255, 0,0)");
                },

                success: function(data) {//如果提交成功，则执行下列操作
                    //alert("后台返回的数据"+data);
                    $("#tjan").val(data);
                    $("#tjan").css("background-color","rgb(75, 138, 241)");
                    //你先做好前台，到时自然会学到如何用php从数据库中取出数据
                    //如果你要新建一个div展示你取出的数据
                    //比如在提交按钮后面输出服务器返回的结果可以这样写
                    $("#tjan").after("<div>服务器返回了："+ data +"</div>");
                }

            });
            return false;
        };
    </script>
<body>
<form id="f1" name="f1" method="post" >
<table width="200" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>姓名</td>
    <td><input id="name" type="text" name="name" /></td>
  </tr>
  <tr>
    <td>密码</td>
    <td><input id="pwd" type="password" name="pwd" /></td>
  </tr>
</table>
<input id="tjan" type="button" onclick="submitNow();" value="提交" />
</form>
</body>
</html>

　　aaa.php代码

<?php
//这里是PHP脚本，php对前台提交过来的数据
//进行判断，拼接等等处理，或从数据库中取出数据
//在这里进行输出，返回给你；
//现在做的事情是将你提交的用户名和密码串起来返回给你
echo @$_POST['name'];
echo ' and ';
echo @$_POST['pwd'];

　　当我直接在桌面双击打开test.html进行提交时，运行结果：
本地文件提交数据到指定域名时失败

　　于是将test.html放到服务器目录上再访问：
数据提交到本域名时成功

当然，在上图中使用相对路径也是没问题的。

　　于是我将url指向另一个站点：
Ajax提交到其他网站

　　于是上网搜索相关原因，找到了这么一句话：
　　
从AJAX诞生那天起，XMLHttprequest对象不能跨域请求的问题就一直存在。这似乎是一个很经典的问题了。是由于javascript的同源策略所导致。

普通网页能够使用XMLHttpRequest对象发送或者接受服务器数据, 但是它们受限于同源策略. 扩展可以不受该限制. 任何扩展只要它先获取了跨域请求许可，就可以进行跨域请求。

　于是我大概了解一下同源策略，由于不打算深入，就参考了百度百科：
　

到此，对Ajax的了解有多了一些。

ONFE

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery-Ajax的一点小经验

前几天给一个师弟做网站前台设计指导，在演示AJAX提交的时候，在桌面上右键新建了一个HTML文件，将表单数据提交到本地配置的站点中的aaa.php文件，测试以失败告终，对url地址检查了一遍又一遍，对于Ajax函数用法也对照了无数遍。实在无奈，就把在服务器上运行的包含ajax提交的页面抓取了下来，修改url指向我的域名。结果还是失败了。由于我并没有系统地学过Jquery，对于Ajax其中的请求细节并
复制链接

扫一扫