zoukankan      html  css  js  c++  java
  • 数据交互 jQuery ajax

    jQuery中封装了很不错的ajax方法用来和后端交互数据。
    其格式如下:

    $.ajax({
        请求地址
        url:'www.zhouxiaohouer.com/api/user',
        请求方式
        type:'get',
        发送给后端的数据对象
        data:{
            name:'zhouxiaohouer',
            sex:'male'
        }
        预期服务器返回的数据类型,如果不指定,jQuery会根据响应包自动判断,一般我们直接设定为json
        dataType:'json',
        成功时候的回调,参数是返回的数据
        success:function(res) {
            console.log(res.data)
        },
        失败时回调,参数是一个xhr对象
        error:function(err) {
            console.log(err.status)
        }
    })

    后端代码:

    // 这里以express某个路由文件说明问题,一级路由是/api
        var express = require('express');
        var router = express.Router();
        router.get('/getsth', function(req, res, next) {
            // 是否需要跨域
            // res.header('Access-Control-Allow-Origin', '*')
            var name = req.query.name
            var price = req.query.price
            res.json({
                status:0,
                msg:'success',
                data:{
                    name : name,
                    price:price
                }
            })
          // req对请求做一些事儿
          // res对响应做一些事儿
          // next,下一步回调事件
        });
        router.post('/poststh', function(req, res, next) {
            // 是否需要跨域
            // res.header('Access-Control-Allow-Origin', '*')
            // post请求的参数封装在body中,这里在express中需要使用body-parser在路由前提前进行封装。
            var name = req.body.name
            var price = req.body.price
            res.json({
                status:0,
                msg:'success',
                data:{
                    name : name,
                    price:price
                }
            })
          // req对请求做一些事儿
          // res对响应做一些事儿
          // next,下一步回调事件
        });
        module.exports = router;
    $.ajax({
        url:'www.zhouxiaohouer.com/api/getsth',
        type:'GET',
        data:{
            name:'番茄炒鸡蛋',
            price:45
        },
        dataType:'json',
        success:function(res) {
            console.log(res.msg)
            console.log(res.data)
        },
        error:function(err) {
            console.log(err.status)
        }
    })
    
    $.ajax({
        url:'www.zhouxiaohouer.com/api/poststh',
        type:'POST',
        data:{
            name:'农家小炒肉',
            price:34
        },
        dataType:'json',
        success:function(res) {
            console.log(res.msg)
            console.log(res.data)
        },
        error:function(err) {
            console.log(err.status)
        }
    })
  • 相关阅读:
    x64汇编第三讲,64位调用约定与函数传参.
    【Unity】6.7 向量和Vector3类
    【Unity】6.6 Random类
    【Unity】6.5 Time类、Mathf类、Coroutine类
    【Unity】6.4 Transform--移动、旋转和缩放游戏对象
    【Unity】6.3 通过 C# 脚本创建和访问游戏对象
    【Unity】6.2 在VS2015中调试 C# 脚本
    【Unity】6.1 Unity中的C#脚本基础知识
    【Unity】第6章 Unity脚本开发基础
    【Unity】4.7 摄像机
  • 原文地址:https://www.cnblogs.com/zhouxiaohouer/p/8028457.html
Copyright © 2011-2022 走看看