Ajax 无法使用按钮答案

【问题标题】：Ajax not working with buttonAjax 无法使用按钮
【发布时间】：2017-05-29 08:42:11
【问题描述】：

我的发送按钮不起作用。脚本不应该带我去 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>

【问题讨论】：

据我所知，没有重定向到 add.php。您可以在 ajax 返回输出后添加它以获取 add.php。
您还需要在实验室考试中使用 ajax 吗？因为如果没有，你可以把 action iside form 标签设置为 add.php
是的，我需要使用 ajax。这是我的实验室要求，这个要求今天刚刚发布，几分钟前。 “使用 AJAX 的 CRUD”
我不明白你对重定向有什么想说的。 url: '../crud/add2.php'，我确实是用html写的

标签： php html ajax forms submit

【解决方案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>

但这种方式会将同一行添加到您的数据库中两次。

最终更新： 好的，正如您在 commencts 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>

【讨论】：

让我试试你的方法
我添加了一些进一步的信息。如果您告诉我您是否真的需要在使用 ajax 发送到数据后进行重定向，或者只是在 ajax 完成后附加一些消息，那将会很好。
我的代码的工作方式就像从 html 获得的数据传递到 -> add.php。插入查询后，它会显示主页按钮。
我试过你的方法。但它只是重定向，数据没有通过我猜问题出在这个 if(isset($_POST)) {
是的，这就是为什么我要问你想要实现什么。因此，在成功插入数据库后，您只想添加主页按钮吗？所以不需要重定向。还是您仍然想在插入后重定向但再次发布相同的数据？因为我已经以这种方式编辑了答案。

【解决方案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()
      });

    });  
 });

【讨论】：

【解决方案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文件，上面的代码就放在里面。这对我有用。

【讨论】：