Ajax——jq中ajax的使用

最新推荐文章于 2025-09-11 23:21:03 发布

weixin_30611509

最新推荐文章于 2025-09-11 23:21:03 发布

阅读量52

点赞数

CC 4.0 BY-SA版权

文章标签： php javascript json ViewUI

原文链接：http://www.cnblogs.com/wuqiuxue/p/8182724.html

本文通过实例介绍HTML表单提交方式及使用jQuery实现的GET与POST异步请求，涵盖基本AJAX操作，包括数据序列化、发送前处理、成功回调及错误处理等。

格式化表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
</head>
<body>
<form action="11.php" method="get" id="form">
    <input type="text" name="text" value="wq"><br>
    <input type="text" name="pwd" value="123"><br>
    <input type="text" name="sex" value="nv">
</form>
<script>
    $(function () {
        var a = $('#form').serialize();
        console.log(a);//text=wq&pwd=123&sex=nv
        $.get('11.php', a, function (data) {
            console.log(data);//wq
        });
    });
</script>
</body>
</html>

<?php
  header("content-type:text/html;charset=utf-8");
  echo $_GET['text'];
?>

异步提交

1、参数的顺序要正确：url、data、success、dataType

2、最后一个dataType可以不写，如果写了json，那么返回的数据会自动进行js对象的转化JSON_parse()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
</head>
<body>
<button>get异步</button>
<button>post异步</button>
<script>
    $(function () {
        $('button:eq(0)').on('click',function () {
            $.get('12.php',{name:'wq',age:12},function (data) {
                console.log(data);//wq==12
            })
        });
        $('button:eq(1)').on('click',function () {
            $.post('13.php',{name:'qx',age:14},function (data) {
                console.log(data);//qx===14
            })
        });
    });
</script>
</body>
</html>

<?php
  header("content-type:text/html;charset=utf-8");
  echo $_GET['name'].'=='.$_GET['age'];
?>

<?php
  header("content-type:text/html;charset=utf-8");
  echo $_POST['name'].'==='.$_POST['age'];
?>

ajax综合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
</head>
<body>
<button>ajax异步</button>
<script>
    $(function () {
        $('button:eq(0)').on('click',function () {
            $.ajax({
                url:'13.php',
                data:{name:"qx",age:17},
                success:function (data) {
                    console.log(data);//qx===17
                },
                type:'post',
                beforeSend:function () {
                    console.log('发送之前调用');
                },
                error:function () {
                    console.log('数据接收错误');
                }
            });
        });
    });
</script>
</body>
</html>

<?php
  header("content-type:text/html;charset=utf-8");
  echo $_POST['name'].'==='.$_POST['age'];
?>

转载于:https://www.cnblogs.com/wuqiuxue/p/8182724.html