$ajax()提交例子

最新推荐文章于 2021-08-05 16:13:23 发布

GabbyMrH

最新推荐文章于 2021-08-05 16:13:23 发布

阅读量219

点赞数

分类专栏： PHP笔记 jquery

本文链接：https://blog.csdn.net/qq_36432666/article/details/79822114

版权

PHP笔记同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

jquery

3 篇文章 0 订阅

订阅专栏

本文介绍了一个简单的Ajax应用案例，通过使用HTML、PHP、JavaScript和jQuery库来实现实时表单验证。当用户尝试登录时，表单将通过Ajax发送到服务器进行验证，而无需重新加载整个页面。

摘要由CSDN通过智能技术生成

需要的文件有：index.html、test.php、test.js、jquery-1.12.4.min.js
index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/test.js"></script>
    <meta charset="UTF-8">
    <title>ajax</title>
</head>
<body>
        <div>
        <form id="reg" method="post">
        <p class="myerror"></p>
        <p>账号：<input type="text" name="user" id="user"></p>
        <p>密码：<input type="password" name="pass" id="pass"></p>
        <p><input type="submit" name="submit" id="submit" value="提交"></p>
        </form>
        </div>
</body>
</html>

test.php文件

<?php 
    $user = $_POST['user'];
    $password = $_POST['pass'];
    if ($user != 123456 || $password != 12345678) {
        echo 'false';
    } else {
        echo 'success';
    }

 ?>

test.js文件：

$(document).ready(function(){
    $('input[type=submit]').click(function(){
        $.ajax({
            url:'test.php',
            type:'POST',
            dataType:'json',
            data:$('#reg').serialize(),
            success:function(){
                alert('成功');
            },
            error:function(){
                alert('shibai');
            },
        });
    });
});