Question

我创建了一个具有Bootstrap Modal按钮的页面。当用户单击此按钮时，将打开一个模式窗口，并显示一个表单，以通过Ajax和PHP代码在Mysql表上插入数据。发生的是我的Ajax脚本无法正常工作。我试图找到类似的问题，但没有找到解决方法：

我的表格有3列：

ID   --> INT(11) AI
name --> VARCHAR(100)
email--> VARCHAR(100)

下面是我用来通过Ajax脚本添加数据的模态代码：

<button type="button" class="btn btn-block btn-primary" data-toggle="modal" data-target="#dataModal>ADD USER</button>

<!-- Modal -->
<div class="modal fade" id="dataModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" >Add Users</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
         </div>
         <div class="modal-body">
            <form id="usersForm" method="post">
               <input type="text" name="name"/>
               <input type="email" name="email"/>
         </div>
         <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-dismiss="modal">CLOSE</button>
         <button type="submit" class="btn btn-success" id="submit" >ADD USER</button>
             </form>    
         </div>
      </div>
   </div>
</div>

要通过PHP脚本（ insert.php ）将数据发送到数据库，我在项目中使用了以下Ajax脚本代码：

<!--AJAX-->   

<script type="text/javascript">
$(document).on('submit','#usersForm',function(e) {
var Name = $("#name").val();
var Email = $("#email").val();

// AJAX code to send data to php file.
    $.ajax({
        type: "POST",
        url: "insert.php",
        data: {Name:name, Email:email},
        dataType: "JSON",
        success: function(data) {
         alert("Data Inserted Successfully.");
        },
        error: function(err) {
        alert(err);
        }
    });

 }

</script>

下面是我用来在Mysql表上插入数据的 insert.php 代码：

<?php

include('db_connect.php');

$Name = $_POST['name'];
$Email = $_POST['email'];

$stmt = $connection->prepare("INSERT INTO users (name, email) VALUES(:name, :email)");

 $stmt->bindparam(':name', $Name);
 $stmt->bindparam(':email', $Email);
 if($stmt->execute())
 {
  $res="Data Inserted Successfully:";
  echo json_encode($res);
  }
  else {
  $error="Not Inserted,Some Probelm occur.";
  echo json_encode($error);
  }

  ?>

还有我的PHP数据库连接脚本 db_connect.php ：

<?php

$username = 'root';
$password = '';
$connection = new PDO( 'mysql:host=localhost;dbname=system', $username, $password );

?>

如果我对表单标签执行以下操作：

form id =“ usersForm” method =“ post” action =“ insert.php”

数据已发送到数据库，但是如果我删除了 action =“ insert.php” ，当用户单击“提交”按钮时，什么也不会发生。我认为与我的Ajax脚本有关。会是什么？

Answer 1

这是您的代码更正。尝试一下。可以。

确保包含您的jquery库。

其次，您未按照输入格式设置电子邮件ID和名称

id =“名称” id =“ email”

第三，您应该删除文本输入周围的form元素。只需删除它即可。

<form id="usersForm" method="post">
</form

并在下面这样使用它

     <input type="text" name="name" id="name"/>
       <input type="email" name="email" id="email"/>
 <button type="submit" class="btn btn-success" id="submit" >ADD USER</button>

最后，在Ajax调用中，将变量电子邮件和名称设置为大写字母，但在php中将其发布为小写字母。请小心

下面是正在修改的代码

        <script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('#submit').click(function(){
var Name = $("#name").val();
var Email = $("#email").val();

alert(Name);
alert(Email);

// AJAX code to send data to php file.
    $.ajax({
        type: "POST",
        url: "insert.php",
        data: {Name:name, Email:email},
        dataType: "html",
        success: function(data) {
         alert("Data Inserted Successfully.");
        },
        error: function(err) {
        alert(err);
        }
    });
})
});




</script>

或者您也可以使用我新测试的代码。

        <script src="jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){


    $('#submit').click(function(){
alert('ok');

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

//set variables to check for valid email
    atpos = email.indexOf("@");
    dotpos = email.lastIndexOf(".");


        if(name==""){

            alert('please Enter name');


        }

 else if(email==""){

            alert('please Enter Email');


        }


else  if (atpos < 1 || ( dotpos - atpos < 2 ))
    {
        alert("Please enter correct email Address")
        return false;
    }





else{

$('#loader').fadeIn(400).html('<span>Please Wait, Your Data is being Submitted</span>');





var datasend = "nm="+ name + "&em=" + email;

        $.ajax({

            type:'POST',
            url:'insert.php',
            data:datasend,
                        crossDomain: true,
            cache:false,
            success:function(msg){


alert('message successfully inserted');

                //empty name and email box after submission
$('#name').val('');
                $('#email').val('');
                $('#loader').hide();
                $('#alertbox').fadeIn('slow').prepend(msg);
                $('#alerts').delay(5000).fadeOut('slow');

            }

        });

        }

    })

});


</script>






<div id="loader"></div>
 <div id="alertbox"></div>


               <input type="text" name="name" id="name"/>
               <input type="email" name="email" id="email"/>
         <button type="submit" class="btn btn-success" id="submit" >ADD USER</button>

更新部分

尝试一下。 ajax提交成功后，它将显示一条成功消息

    <script type="text/javascript">

    $(document).ready(function(){


        $('#submit').click(function(){


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

    //set variables to check for valid email
        atpos = email.indexOf("@");
        dotpos = email.lastIndexOf(".");


            if(name==""){

                alert('please Enter name');


            }

     else if(email==""){

                alert('please Enter Email');


            }


    else  if (atpos < 1 || ( dotpos - atpos < 2 ))
        {
            alert("Please enter correct email Address")
            return false;
        }





    else{

    $('#loader').fadeIn(400).html('<span>Please Wait, Your Data is being Submitted</span>');





    var datasend = "Name="+ name + "&Email=" + email;

            $.ajax({

                type:'POST',
                url:'insert.php',
                data:datasend,
                            crossDomain: true,
                cache:false,
                success:function(msg){

    if(msg=='success'){
    alert('message successfully inserted');
    }else{
alert('message submission failed');
}
                    //empty name and email box after submission
    $('#name').val('');
                    $('#email').val('');
                    $('#loader').hide();
                    $('#alertbox').fadeIn('slow').prepend(msg);
                    $('#alerts').delay(5000).fadeOut('slow');

                }

            });

            }

        })

    });


    </script>

php测试文件，例如。 insert.php

<?php


$Name = $_POST['Name'];
$Email = $_POST['Email'];


echo "success";
?>

所以您的php文件应该看起来像

<?php

//include('db_connect.php');

$Name = $_POST['Name'];
$Email = $_POST['Email'];


$stmt = $connection->prepare("INSERT INTO users (name, email) VALUES(:name, :email)");

 $stmt->bindparam(':name', $Name);
 $stmt->bindparam(':email', $Email);
 if($stmt->execute())
 {
  //$res="Data Inserted Successfully:";
  //echo json_encode($res);

echo "success";
  }
  else {
 // $error="Not Inserted,Some Probelm occur.";
  //echo json_encode($error);
echo "failed";
  }

  ?>

Answer 2

<input type="text" name="name"/>
<input type="email" name="email"/>

在表单中，将ID属性添加到输入中。

<input type="text" name="name" id="name" />
<input type="email" name="email" id="email" />

或者尝试更改您的ajax：

var Name = $("#name").val();
var Email = $("#email").val();

到

var Name = $("#usersForm input[name="name"]").val();
var Email = $("#usersForm input[name="email"]").val();

还要添加e.preventDefault（）;不刷新页面，

$(document).on('submit','#usersForm',function(e) {
e.preventDefault();

Answer 3

我也找到了另一种解决方法：

<script>

$(document).on('submit', '#usersForm', function(event){
        event.preventDefault();
    $.ajax({
                url:"insert.php",
                method:'POST',
                data:new FormData(this),
                contentType:false,
                processData:false,
                success:function(data){
                    alert('OK');
                    $('#usersForm')[0].reset();
                    $('#dataModal').modal('hide');
                }
});
});

</script>

Ajax插入数据脚本无法正常工作。我如何改善此代码？

3 个答案: