美文网首页
ajax模拟后台发送数据

ajax模拟后台发送数据

作者: 质真如渝 | 来源:发表于2016-04-08 00:49 被阅读302次

编写html

<form action="" id="formBtn">   
    username:<input type="text" name="username"/>   
    password:<input type="password" name="pwd"/>   
    <input type="button" value="submit" id="btn"/>
</form>
<div id="item"></div>

使用jQuery发送ajax请求

<script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
<script>   
    //获取按钮和表单   
    var $btn = $('#btn'),      
        $formBtn = $('#formBtn');   
    //给按钮添加点击事件   
    $btn.on('click',function(){      
        //发送ajax      
        $.ajax({         
            url: "http://localhost:3000/reg",         
            type: 'POST',         
            data: $formBtn.serialize(),         
            dateType: 'text',         
            success: function(data){            
                $('#item').html(JSON.parse(data).msg );         
            }      
        })   
    })
</script>

安装数据库之后打开命令行创建表

show databases; //查看表
create table user(number INT(11),username varchar(32),pwd varchar(32));  //创建表
select * from user //查看user表

并且需要在该项目文件夹下:npm install mysql

模拟后台编写js

var http = require('http');var url = require('url');
var fs = require('fs');var mysql = require('mysql');
var qs = require('querystring');
var connection = mysql.createConnection({   
    host: 'localhost',   
    port: '3306',   
    user: 'root',   
    password: '123456',   
    database: 'test'
});
var server = http.createServer(function(req,res){   
    var urlObj = url.parse(req.url,true);     
    var pathname = urlObj.pathname;   
    res.writeHead(200,{"Access-Control-Allow-Origin":"*"});      
    if('/' == pathname){      
        fs.readFile('./reg.html', function(err,data){         
            res.end(data);      
        });   
    }else if('/reg' == pathname){      
        //每当服务器接收到客户端发送过来的数据时候 会出发事件      
        var ret = '';      
        req.on('data', function(data){         
            console.log(data.toString);         
            ret +=  data.toString();      
        });      
       //接收完毕的时候触发end事件 请求体的数据就是接收完整了      
       req.on('end', function(){                  
          //{email:'cjj@sina.com', pwd:'123456'}         
          ret = qs.parse(ret);         
          console.log(ret);         
          var sql = "insert into user(id,username,pwd) values(null,'" + ret.username + "','" + ret.pwd + "')";         
          connection.query(sql, function(err,ret){            
                if(err){               
                         return console.log(err);            
                }else{               
                         //当注册成功后返回这个               
                         res.end('{"msg":"register success!!!!!"}');            
                    }         
            });              
         });   
    }  
});
server.listen(3000, 'localhost',function(){   
    console.log('server running on localhost:3000');
});

运行改文件即可。

相关文章

  • ajax模拟后台发送数据

    编写html 使用jQuery发送ajax请求 安装数据库之后打开命令行创建表 并且需要在该项目文件夹下:npm ...

  • ajax,本地存储

    ajax 发送http请求ajax技术的目的是让javascript发送http请求,与后台通信,获取数据和信息。...

  • 前端(十七)

    ajax:ajax技术的目的是让javascript发送http请求,与后台通信,获取数据和信息。ajax技术的原...

  • jQuery ajax 和 正则

    ajax ajax技术的目的是让javascript发送http请求,与后台通信,获取数据和信息。ajax技术的原...

  • 前端

    ajax:ajax技术的目的是让javascript发送http请求,与后台通信,获取数据和信息。ajax技术的原...

  • 无标题文章

    1、ajax_get.html //ajax //ajax发送请求并拼接请求数据,后台通过一系列操作,返回给前...

  • 前端(ajax,jsonp)

    ajax,jsonp ajax技术的目的是让javascript发送http请求,与后台通信,获取数据和信息。aj...

  • 正则与json

    正则 ajax与jsonp ajax技术的目的是让javascript发送http请求,与后台通信,获取数据和信息...

  • ajax与jsonp

    ajax与jsonp 简介:ajax技术的目的是让javascript发送http请求,与后台通信,获取数据和信息...

  • 前端(ajax、jsonp、jsonp公开接口)

    ajax与jsonp ajax技术的目的是让javascript发送http请求,与后台通信,获取数据和信息。aj...

网友评论

      本文标题:ajax模拟后台发送数据

      本文链接:https://www.haomeiwen.com/subject/jhzmlttx.html