Ajax无法使用按钮

时间:2017-05-29 08:42:12

标签: php html ajax forms submit

我的发送按钮无效。不应该脚本带我add.php? 但不是它,它刷新页面?怎么样和为什么?请帮帮我 它没有使用Ajax脚本。

Tommorow是我的实验考试,我无法使事情正常运作。

我应该做些什么改变才能解决问题。

<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>

3 个答案:

答案 0 :(得分:2)

好的,因为你说你需要在实验室考试中使用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数据。我不确定你为什么要重定向到fierst地方的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>

答案 1 :(得分:0)

请创建包含按钮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()
      });

    });  
 });

答案 2 :(得分:0)

UPDATE d1_plz_whatever
    SET nr=SUBSTRING(hn FROM '^[0-9]+'),
        zusatz =SUBSTRING(hn FROM '[a-zA-Z]+$');

两个文件.php .html必须有一个js文件,其中放置了上述代码。 这对我有用。