ch3-form(get/post) $.ajax(get/post)

1 http(get）请求 提交的数据 用req.query接收
  1.1 router.get() //http(get)请求方式

  1.2 接收http(get)方式提交的数据
  req.query 方式接收前台数据
    如req.query.name 获取前台提交key为name的数据

  1.3 form get方式提交数据
  router/index.js代码
    router.get('/formget', function(req, res){
        var mysqlHandle = 'INSERT INTO `user` (`id`, `username`, `pass`) VALUES (0,?,?)',
            value = [req.query.name, req.query.pass];
        //console.log(value);
        sql(mysqlHandle, value, function(err, data){
           res.render('form_get.ejs');
        });
     });
  view/form_get.ejs代码
    <form action="/formget" method="get">
        <input type="text" name="name">
        <input type="text" name="pass">
        <input type="submit" value="提交">
    </form>

  1.4 $.ajax() get方式提交数据
  router/index.js代码
    router.get('/ajaxget', function(req, res){
      var mysqlHandle = 'INSERT INTO `user` (`id`, `username`, `pass`) VALUES (0,?,?)',
          value = [req.query.name, req.query.pass];
      sql(mysqlHandle, value, function(err, data){
         //console.log(value);
         res.render('ajax_get.ejs'); //渲染到 ajax_post.ejs页面
      });
    });
  view/ajax_get.ejs代码
    <input class="user" type="text">
    <input class="pass" type="password" >
    <input class="submit" type="submit">

    <script>
        $(function(){
            $('.submit').click(function(){
                $.ajax({
                    url: '/ajaxget',
                    type: 'get',
                    data: {
                        name: $('.user').val(),
                        pass: $('.pass').val()
                    },
                    sccess: function(){
                        alert('已提交')
                    }
                })
            });
        })
    </script>

2 http(post)请求 提交的数据 用req.body接收
  1.1 安装 body-parser模块
    dependencies: {
        "body-parser": "latest" //['pɑ:sə]剖析器
    }
  1.2 依赖这个模块 app.js代码
    app.use(bodyParser.json()); //用来接收json数据
    app.use(bodyParser.urlencoded({extended: true})); //true可以接收任何类型的数据

  1.3 接收http(post请求) 用req.body接收
      如req.body.name 获取前台提交key为name的数据

  1.4 form post方式提交数据
    router/index.js代码
       // url: /formpost ;  http(get)
       router.get('/formpost', function(req, res){
          sql('SELECT * FROM `user`', function(err, data){
             //console.log(data);
             res.render('form_post.ejs', {outData: data}); //渲染到form_post.ejs 并从后台传递数据传递数据
          });
       });
       //url: /formpost ; http(post)
       router.post('/formpost', function(req, res){
          var mysqlHandle = 'INSERT INTO `user` (`id`, `username`, `pass`) VALUES (0,?,?)',
              value = [req.body.name, req.body.pass];
          //console.log(req.body);
          sql(mysqlHandle, value, function(err, data){
          });
          res.json({ //不写响应会一直转
             chenggong:"成功"
          });
       });
    view/form_post.ejs代码
        <form action="/formpost" method="post">
            <input type="text" name="name">
            <input type="password" name="pass">
            <input type="submit" value="提交">
        </form>

        <% for(var key in outData){ %>
        <p>
            <%=outData[key]['username'] %> : <%=outData[key]['pass'] %>
        </p>
        <% } %>

    1.5 $.ajax() post方式提交数据
      router/index.js代码
        // url: /ajaxpost
          //http(get)请求页面
          router.get('/ajaxpost', function(req, res){
              var dataOptStr = 'SELECT * FROM `user`';
              sql(dataOptStr, function(err, data){
                  //console.log(data);
                  res.render('ajax_post.ejs', {outData:data}); //渲染到ajax_post.ejs页面
              });
          });
          //$.ajax()post方式提交页面
          router.post('/ajaxpost', function(req, res){
              var dataOptStr = 'INSERT INTO `user` (`id`, `username`, `pass`) VALUES (0,?,?)';
              var inData = [req.body.name, req.body.pass];
              sql(dataOptStr, inData, function(err, data){
              });
              res.json({
                  ok: '成功'
              });
          });
      view/ajax_post.ejs代码
            <input class="user" type="text">
            <input class="pass" type="password">
            <input class="submit" type="submit" value="提交">

            <% for(var key in outData){ %>
                <p>
                    <%= outData[key]['username']  %> :
                    <%= outData[key]['pass'] %>
                </p>
            <% } %>

            <script>
                $(function(){
                   $('.submit').click(function(){
                       $.ajax({
                          url: '/ajaxpost',
                          type: 'post',
                          data: {
                              name: $('.user').val(),
                              pass: $('.pass').val()
                          },
                          success: function(){
                              alert('已经提交');
                          }
                       });
                   })
                });
            </script>