jq通过ajax向服务器跨域传值,接口开发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>用户的参数传递</h1>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script type="text/javascript" src="./node_modules/axios/dist/axios.js"></script>
    <h2>用户GET登录</h2>
    <form id="myForm">
        <input type="text" name="name" placeholder="用户名"><br>
        <input type="password" name="password" placeholder="密码"><br>
        <input type="submit" value="登录">
    </form>
    <hr>
    <h1>用户POST登录</h1>
    <form id="postForm">
        <input type="text" name="name" placeholder="用户名"><br>
        <input type="password" name="password" placeholder="密码"><br>
        <input type="submit" value="登录">
    </form>
</body>
<script type="text/javascript">
    $("#myForm").submit(()=>{
        console.log($("#myForm").serialize())
        $.ajax({
            url:"http://localhost:3000/userLoginApi",
            data:$("#myForm").serialize(),
            type:"GET",
            success:(data)=>{
                console.log(data)
            },
            dataType:"json",
            error:(xhr,status,error)=>{
                console.log(error)
            }
        })
        return false;
    })
    //-------------------------------------------------------------------
    $("#postForm").submit(()=>{
        $.ajax({
            url:"http://localhost:3000/userLoginApi",
            type:"POST",
            data:$("#postForm").serialize(),
            success:(data)=>{
                console.log(data)
            },
            dataType:"json",
            error:(xhr,status,error)=>{
                console.log(status,error)
            }
        })
        return false;
    })
</script>
</html>
var http=require("http")
var url=require("url")
var querystring=require("querystring")
var fs=require("fs")
http.createServer((req,res)=>{
    var obj=url.parse(req.url)
    if(obj.pathname!="/favicon.ico"){
        if(req.method=="GET"){
            if(obj.pathname=="/userLoginApi"){
                var params=querystring.parse(obj.query)
                var result={}
                if(params){
                    if(params.name=="david"&&params.password=="123456"){
                        result.code=0;
                        result.data="success"
                    }else{
                        result.code=1;
                        result.data="fail"
                    }
                }else {
                    result.code=2;
                    result.data="没有提交参数"
                }
                res.writeHead(200,{
                    "Content-Type":"text/plain;charset=utf8",
                    "Access-Control-Allow-Origin":"*"
                })
                res.end(JSON.stringify(result))
            }else{
                res.writeHead(404,{"Content-Type":"text/plain;charset=utf8"})
                res.end("找不到对应的页面")
            }

        }else if(req.method=="POST"){
            if(obj.pathname=="/userLoginApi"){
                var tempData="";
                req.on("data",(chuck)=>{
                    tempData+=chuck;
                })
                req.on("end",()=>{
                    console.log("tempData",tempData)
                    var params=querystring.parse(tempData)
                    var result={}
                    if(params){
                        if(params.name){
                            if(params.name=="david"&&params.password=="123456"){
                                result.code=0;
                                result.data="success"
                            }else{
                                result.code=1;
                                result.data="fail"
                            }
                        }else{
                            result.code=2;
                            result.data="没有提交参数"                        }
                    }
                    res.writeHead(200,{
                        "Content-Type":"text/html;charset=utf8",
                        "Access-Control-Allow-Origin":"*"
                    })
                    res.end(JSON.stringify(result))
                })  
            }
        }
    }
}).listen(3000,()=>{
    console.log("服务器运行在3000端口")
})
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,185评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,652评论 3 393
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,524评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,339评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,387评论 6 391
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,287评论 1 301
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,130评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,985评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,420评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,617评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,779评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,477评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,088评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,716评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,857评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,876评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,700评论 2 354

推荐阅读更多精彩内容