用JQ来写AJAX发送请求到服务器

上回已经写了用Node.js搭建一个服务器,今天就开始使用这个服务器为我们提供数据。

1.首先我写一个简单的请求页面

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>向服务请请求数据</title>
    <script src="jquery-1.11.3.js"></script>

</head>
<body>
    <input type="button" id="btn2" value="发送请求"/>
    <script>
        $("#btn2").on("click",function(){
            $.ajax({
                url:"/ajax.do",
                type:"post",
//            async:false,//同步
                data:{"name":"JF"},//传出的数据
                dataType:"json",//返回的数据类型,常用:html/text/json
                success:function(data){
                    console.log(typeof data);
                    for(var i= 0;i<data.length;i++){
                        console.log(data[i].name);
                    }
                }
            })
        });
    </script>
</body>
</html>

2.接下来我们打开app.js,并启动服务器


3.在浏览器中输入端口号+页面名就能在服务器中打开页面了


同时服务器后台也监听到用户打开的页面消息


4.点击按钮

服务器收到请求


在浏览器后台找到 服务器返回的数据了


当然服务器那边可以写一些验证方法,这样简单的登录验证就能实现了。

如有建议希望大家多多提出意见谢谢。



如果你在使用 jQuery 的 AJAX 发起 POST 请求时遇到了 CORS 错误,可以尝试以下几种方法来解决问题: 1. 在服务端添加 CORS 头信息 在服务端的响应头中添加以下信息: ``` Access-Control-Allow-Origin: * Access-Control-Allow-Methods: POST Access-Control-Allow-Headers: Content-Type ``` 其中,`Access-Control-Allow-Origin` 表示允许跨域的源,`*` 表示任意来源都可以跨域访问;`Access-Control-Allow-Methods` 表示允许跨域请求的方法,这里只需要设置 `POST` 即可;`Access-Control-Allow-Headers` 表示允许跨域请求携带的请求头,这里只需要设置 `Content-Type` 即可。 2. 使用 JSONP 如果服务端无法添加 CORS 头信息,可以考虑使用 JSONP 跨域请求。在 jQuery 中使用 JSONP 的方式如下: ```javascript $.ajax({ url: 'http://example.com/api', type: 'POST', dataType: 'jsonp', jsonp: 'callback', data: postData, success: function(data) { console.log(data); }, error: function(xhr, status, error) { console.log(error); } }); ``` 其中,`dataType` 设置为 `jsonp`,`jsonp` 设置为 `callback`,这样 jQuery 就会自动将 POST 请求转为 GET 请求,并在 URL 中添加一个 `callback` 参数,服务端返回的数据会被包裹在 `callback` 函数中,然后在客户端调用该函数即可。 3. 使用代理方式 如果以上两种方法都无法解决问题,可以考虑使用代理方式。在客户端发起请求时,先将请求发送到自己的服务器,然后由自己的服务器再发起请求到目标服务器,最后将目标服务器的响应返回给客户端。这样就不会遇到跨域问题了。 以上是一些解决 jq ajax CORS 错误 post 请求的方法,希望对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值