Ajax 无法使用按钮

Question

我的发送按钮不起作用。脚本不应该带我去 add.php 吗？但不是它，而是刷新页面？如何以及为什么？请帮帮我它在没有 Ajax 脚本的情况下工作。

明天是我的实验室考试，我无法使事情正常进行。

我应该对其进行哪些更改才能解决问题。

<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>

</head>

<body>
<a class="btn btn-outline-primary" href="index.php">Home</a>
<br/><br/>

<form method="post" id="form1">
    <table width="25%" border="0">
    ...
        ...
        <tr> 
            <td><input class="btn  btn-primary" type="reset" 
 name="Clear" value="Clear"></td>
            <td><input type="button" value="send" id="asdasd" 
 name="Submit" /></td>
        </tr>
    </table>
</form>

<script>
$(document).ready(function(e){
$("#form1").click(function() {

var name=$('#name').val();
var email=$('#email').val();
var age=$('#age').val();
var status=$('#status').val();

    $.ajax({
    type: "POST",
    url: '../crud/add2.php',
    data: $('#form1').serialize()
    });

});
});
</script>

这是我的 add.php 文件

<body>
<?php
//including the database connection file
include_once("config.php");

if(isset($_POST)) {
$name = mysqli_real_escape_string($mysqli, $_POST['name']);
$age = mysqli_real_escape_string($mysqli, $_POST['age']);
$email = mysqli_real_escape_string($mysqli, $_POST['email']);
$status = mysqli_real_escape_string($mysqli, $_POST['status']);

// checking empty fields
if(empty($name) || empty($age) || empty($email)|| empty($status)) {

    if(empty($name)) {
        echo "<font color='red'>Name field is empty.</font><br/>";
    }

    if(empty($age)) {
        echo "<font color='red'>Age field is empty.</font><br/>";
    }

    if(empty($email)) {
        echo "<font color='red'>Email field is empty.</font><br/>";
    }

    if(empty($status)) {
        echo "<font color='red'>Status field is empty.</font><br/>";
    }

    //link to the previous page
    echo "<br/><a href='javascript:self.history.back();'>Go Back</a>";
} else {
    // if all the fields are filled (not empty)

    //insert data to database
    $result = mysqli_query($mysqli, "INSERT INTO         
users(name,age,email,Status)         
VALUES('$name','$age','$email','$status')");

    //display success message
    echo "<font color='green'>Data added successfully.";
    echo "<br/><a href='index.php'>View Result</a>";
}
}
else {
echo "<font color='green'>NOOOOOOO added successfully.";
    echo "<br/><a href='index.php'>View Result</a>";
}  
?>
</body>
</html>

Answer 1

好的，正如您所说，您需要在实验考试中使用 ajax 以下是 ajax 完成后如何重定向：

<script>
$(document).ready(function(){
    $("#asdasd").click(function(e) {

    var name=$('#name').val();
    var email=$('#email').val();
    var age=$('#age').val();
    var status=$('#status').val();

        $.ajax({
            type: "POST",
            url: '../crud/add2.php',
            data: $('#form1').serialize()
        }).done(function(data){
            window.location.href = "add.php"; // or whatever redirect you want
        });

    });
});
</script>

我也不确定您是否理解重定向到 add.php 后您将不会以这种方式获得 $_POST 数据。我不太确定你为什么要在最开始的地方重定向到 add.php 因为 ajax 无论如何都会执行你的脚本（虽然那是 add2.php 而不是 add.php 但我认为它只是错别字之类的）。您可以改为将 ajax 的输出附加到当前页面的正文中（这是 ajax 的基本用途 - 无需重定向）。但是，如果您想使用 ajax 添加数据，并在将自己重定向到 add.php 页面时获取 POSTed 数据，则需要这样的东西：

像这样更改添加操作以形成标签：

<form method="post" id="form1" action="add.php">

然后脚本将如下所示：

<script>
$(document).ready(function(){
    $("#asdasd").click(function(e) {
    e.preventDefault();
    var name=$('#name').val();
    var email=$('#email').val();
    var age=$('#age').val();
    var status=$('#status').val();

        $.ajax({
            type: "POST",
            url: '../crud/add2.php',
            data: $('#form1').serialize()
        }).done(function(data){
            $soap('#form1').submit();
        });

    });
});
</script>

但是这样它会将同一行添加到您的数据库中两次。

最终更新： 好的，如您所愿，在评论中 add.php 看起来像这样：

//including the database connection file
include_once("config.php");

if(isset($_POST)) {
    $name = mysqli_real_escape_string($mysqli, $_POST['name']);
    $age = mysqli_real_escape_string($mysqli, $_POST['age']);
    $email = mysqli_real_escape_string($mysqli, $_POST['email']);
    $status = mysqli_real_escape_string($mysqli, $_POST['status']);

    // checking empty fields
    $result = array();
    if(empty($name) || empty($age) || empty($email)|| empty($status)) {

        if(empty($name)) {
            $result['error']['name'] = 'Name field is empty.';
        }

        if(empty($age)) {
            $result['error']['age'] = 'Age field is empty.';
        }

        if(empty($email)) {
            $result['error']['email'] = 'Email field is empty.';
        }

        if(empty($status)) {
            $result['error']['status'] = 'Status field is empty.';
        }
    } else {
        // if all the fields are filled (not empty)

        //insert data to database
        $result = mysqli_query($mysqli, "INSERT INTO         
        users(name,age,email,Status)         
    VALUES('$name','$age','$email','$status')");

        //display success message
        $result['success'] = "<font color='green'>Data added successfully.".
        "<br/><a href='index.php'>View Result</a>";
    }
} else {
    $result['error_message'] = "<font color='green'>NOOOOOOO added successfully.".
    "<br/><a href='index.php'>View Result</a>";
}  
echo json_encode($result);

脚本部分：

<script>
$(document).ready(function(){
    $("#asdasd").click(function(e) {
        $.ajax({
            type: "POST",
            url: '../crud/add.php',
            data: $('#form1').serialize(),
            dataType: 'json'
        }).done(function(data){
            if(data.hasOwnProperty('error_message')){
                $('#form1').after(data['error_message']);
            } else if(data.hasOwnProperty('error')){
                for(var key in data['error']) {
                    if (data['error'].hasOwnProperty(key)) {
                        $('#'+key).after(data['error'][key]);
                    }
                }
            } else if(data.hasOwnProperty('success')){
                $('#form1').after(data['success']);
            }
        });

    });
});
</script>

Answer 2

请使用按钮 ID 创建点击事件，而不是表单 ID。我已经在您的 ajax 脚本中进行了修改，请试试这个脚本。

<script>
   $(document).ready(function(e){
       $("#asdasd").click(function() {
              var name=$('#name').val();
              var email=$('#email').val();
              var age=$('#age').val();
              var status=$('#status').val();

    $.ajax({
           type: "POST",
           url: '../crud/add2.php',
           data: $('#form1').serialize()
      });

    });  
 });

Answer 3

 $(function () {

 $('#form1').on('submit', function (e) {

    e.preventDefault();

    $.ajax({
        type: 'post',
        url: 'add.php',
        data: $('#form1').serialize(),
        success: function (data) {
            alert('form was submitted');



        },

    error: function () {
        alert('error');
    }
    });

});

});

两个文件.php.html都必须有一个js文件，里面放了上面的代码。这对我有用。

Ajax 无法使用按钮

Ajax not working with button

html

php

forms

ajax

submit