• 技术文章 >web前端 >js教程

    Ajax_POST提交

    无忌哥哥无忌哥哥2018-06-29 14:57:25原创1345

    Ajax_POST提交

    * $_post():jquery处理ajax中的post请求

    * 基本语法:$.post(url, data, success, dataType)

    * 参数说明:

    * url: 请求的地址

    * data: 需要发送到服务器端的数据

    * success(data,status,xhr): 执行成功的回调函数,

    * 回调参数: 1.data: 从服务器端返回的数据

    * 2.status: 当前请求的状态

    * 3.xhr: ajax对象

    * 通常我们只关心返回的数据:data

    * dataType: 从服务器返回数据的格式

    * xml, html, script, json, text, _default

    * 通常是'json',可省略,由系统自动判断

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>4.Ajax_POST</title>
    </head>
    <body>
    <form action="api/check.php" method="post">
    <fieldset>
    <legend>用户登录</legend>
    <p>
    <label for="email">邮箱:</label>
    <input type="email" name="email" id="email">
    </p>
    <p>
    <label for="password">邮箱:</label>
    <input type="password" name="password" id="password">
    </p>
    <p>
    <button>登录</button>
    <span id="tips" style="font-size:1.2em;font-weight: bolder;color:red"></span>
    </p>
    </fieldset>
    </form>
    </body>
    </html>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
    $('button:first').click (function(){
    //1.ajax-post提交的地址
    var url = 'api/user.php?m=login'
    //2.要提交到服务器的数据
    var data = {
    "email": $('#email').val(),
    "password": $('#password').val()
    }
    //3.设置执行成功的回调函数
    var success = function(res){
    if (res == '1') {
    $('#tips').text('登录成功,正在跳转中...')
    setTimeout(function(){
    location.href = 'api/index.php'
    },2000)
    } else {
    $('#tips').text('邮箱或密码错误,请重新输入...')
    $('#email').focus()
    setTimeout("$('#tips').empty()",2000)
    }
    }
    //4.设置返回的数据格式为:json
    var dataType = 'json'
    //5.调用全局函数$.post()执行post请求
    $.post(url, data, success, dataType)
    /**简化代码,将参数值直接写到参数中
    $.post(
    'api/user.php?m=login',
    {
    "email": $('#email').val(),
    "password": $('#password').val()
    }, 
    function(data){
    if (data == '1') {
    $('#tips').text('登录成功,正在跳转中...')
    setTimeout(function(){
    location.href = 'api/index.php'
    },2000)
    } else {
    $('#tips').text('邮箱或密码错误,请重新输入...')
    $('#email').focus()
    setTimeout("$('#tips').empty()",2000)
    }
    }, 'json')
    */
    //禁用默认提交
    return false
    })
    </script>

    以上就是Ajax_POST提交的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:Vue 实现双向绑定的方法 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 一文带你深入了解Node.js(图文详解)• Node学习之如何最小化堆分配和防止内存泄漏• 聊聊Node.js中怎么用async函数• 聊聊Node项目中怎么操作MySQL• 深入解析JWT(JSON Web Token)的原理及用法
    1/1

    PHP中文网