Node的web编程（三）

最新推荐文章于 2024-01-04 22:37:21 发布

秃头小宋s

最新推荐文章于 2024-01-04 22:37:21 发布

阅读量611

点赞数

分类专栏： Node 文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/m0_73634593/article/details/128025600

版权

Node 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、jQuery中对ajax封装

1、底层封装：封装了XMLHttpRequest对象，既可以发送get请求，也可以发送post请求

$.ajax({

url：'服务器地址',

type：'请求方式',

data：{ //客户端向服务器发送的请求数据

参数名1：参数值1，

参数名2：参数值2

        }，

dataType：'服务器响应的数据的格式' //json、html、xml等

success：function(result){ //请求-响应成功后的回调函数。

参数result保存的服务器给客户端响应的数据

        }

error：function(err){ //请求-响应成功后的回调函数。

err存放的是错误的信息

        }

}

2、高层的封装

（1）$.get(url,[data],[callback],[type]) //发送的是get方式的请求

url：请求地址

data：发给给服务端的请求数据

callback：请求成功后的回调函数

type：服务器响应的数据类型

前端页面：

<p>Login</p>
<label for="">
    <input type="text" placeholder="用户名" id="username">
</label>

<label for="">
    <input type="text"  placeholder="密码" id="pwd">
</label>
<button id="btn_submit">登录</button>
<br>
<div id="my_div">
</div>
<script>
    $(function (){
        $('#btn_submit').bind('click',function (){
            $.ajax({
                url:'http://127.0.0.1:9000',
                type:'get',
                data:{
                    username:$('#username').val(),
                    pwd:$('#pwd').val()
                },
                dataType:'text', //服务器响应的数据是纯文本字符串
                success:function (res){
                    console.log(res);
                    $('#my_div').html(res);
                }
            })
        })
    })
</script>

后台服务器

const http = require('http');
const url = require('url');
const getServer = http.createServer((req,res)=>{
    res.setHeader('Access-Control-Allow-Origin','*');
    res.setHeader('Access-Control-Allow-Methods','GET,POST,DELETE,OPTIONS');
    let get_url = url.parse(req.url,true).query;
    res.setHeader('Content-Type','text/html;charset=utf8');
    console.log(get_url);
    res.end(`用户名:${get_url.username}<br>密码:${get_url.pwd}`);
})
getServer.listen(9000,'127.0.0.1',()=>{
    console.log('服务器已启动~')
})