使用Ajax使用PHP向MySQL数据库插入记录

Question

使用Ajax使用PHP向MySQL数据库插入记录

3

如何使用Ajax编写此代码。请帮助。 我是新手，我已经编写了这段代码，它可以工作，但我想使用Ajax，因为不想重新加载页面...?

PHP文件

    //Code For Making Form And getting Data…..
    <html>
    <body>
    Fill -ID,NAME,EMAIL_ID,PASSWORD,CREDITS,
    <form action="Form_Data.php" method="post"> 

ID: <input type="text" name="ID"><br><br>
NAME: <input type="text" name="NAME"><br><br>
PASSWORD: <input type="text" name="PASSWORD"><br><br>
CREDITS: <input type="text" name="CREDITS"><br><br>
E_mail: <input type="text" name="EMAIL_ID"><br><br>
CREATED_ON:<input type="text" name="CREATED_ON"><br><br>
MODIFIED_ON:<input type="text" name="MODIFIED_ON"><br><br>
<input type="submit">
</form>

</body>
</html>

//从表单数据中获取数据的代码。

<html>
<?php
include 'connnect.php';
   mysql_set_charset('utf8');
   //query for insert data into tables
   $ID = $_POST['ID'];
   $NAME =$_POST['NAME'];
   $EMAIL_ID =$_POST['EMAIL_ID'];
   $PASSWORD =$_POST['PASSWORD'];
   $CREDITS =$_POST['CREDITS'];
   $CREATED_ON=$_POST['CREATED_ON'];
   $MODIFIED_ON=$_POST['MODIFIED_ON'];

   $query = "INSERT INTO `user_table` 
         (`ID`,`NAME`,`EMAIL_ID`,`PASSWORD`,`CREDITS`,`CREATED_ON`,`MODIFIED_ON`)
         VALUES
         ('$ID','$NAME','$EMAIL_ID','$PASSWORD','$CREDITS','$CREATED_ON','$MODIFIED_ON')";
         $query_run= mysql_query($query);
         $retval=mysql_query($query,$conn);
           if ($query_run)
   { echo 'It is working';
}
   mysql_close($conn);
?>
</html>

我已经尝试过但是……以下是失败的原因……

file for html and ajax
    <html>
     <HEAD>    
       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
       </HEAD>
    <body>
    <div id="status_text">
    Fill -ID,NAME,EMAIL_ID,PASSWORD,CREDITS,
    <form onsubmit="return false" method="post">
    ID: <input type="text" id="ID" name="ID"><br><br>
    NAME: <input type="text" id="NMAE" name="NAME"><br><br>
    PASSWORD: <input type="text"  id= "PASSWORD"name="PASSWORD"><br><br>
    CREDITS: <input type="text" Id= "CREDITS"name="CREDITS"><br><br>
    Email_ID: <input type="text" id="Email_ID"name="EMAIL_ID"><br><br>
    CREATED_ON:<input type="text" id="CREATED_ON" name="CREATED_ON"><br><br>
    MODIFIED_ON:<input type="text" id="MODIFIED_ON" name="MODIFIED_ON"><br><br>
    <input type="submit"  id="btn_submit" name="submit" value="Send">
    </div>

<script>

//on the click of the submit button 
$("#btn_submit").click(function(){
    //get the form values
 var ID = $('#ID').val();     
 var NAME = $('#NAME').val();     
 var PASSWORD = $('#PASSWORD').val();
 var CREDITS = $('#CREDITS').val();
 var EMAIL_ID = $('#EMAIL_ID').val();
 var CREATED_ON = $('#CREATED_ON').val();
 var MODIFIED_ON = $('#MODIFIED_ON').val();
 //make the postdata
 var postData = '&ID='+ID+'&NAME='+NAME+'&PASSWORD='+PASSWORD+'&REDITS'+CREDITS+'&EMAIL_ID'+EMAIL_ID+'&CREATED_ON'+CREATED_ON+'&MODIFIED_ON'+MODIFIED_ON;
 //call your .php script in the background, 
 //when it returns it will call the success function if the request was successful or 
 //the error one if there was an issue (like a 404, 500 or any other error status)
});
 $.ajax({
    url : "Form_Data.php",
    type: "POST",
    data : postData,
    success: function(data,status,  xhr)
     {
        //if success then just output the text to the status div then clear the form inputs to prepare for new data
        $("#status_text").html(data);
        $('#ID').val();
        $('#NAME').val('');
        $('#PASSWORD').val('');
        $('#EMAIL_ID').val('');
        $('#CREATED_ON').val('');
        $('#MODIFIED_ON').val('');
         }

});  
</script>


</form>

</body>
</div>
</html>

查询代码...

<html>
<?php
include 'connnect.php';
   mysql_set_charset('utf8');
   //query for insert data into tables
   $ID = $_POST['ID'];
   $NAME =$_POST['NAME'];
   $EMAIL_ID =$_POST['EMAIL_ID'];
   $PASSWORD =$_POST['PASSWORD'];
   $CREDITS =$_POST['CREDITS'];
   $CREATED_ON=$_POST['CREATED_ON'];
   $MODIFIED_ON=$_POST['MODIFIED_ON'];


$query = "INSERT INTO `user_table` 
         (`ID`,`NAME`,`EMAIL_ID`,`PASSWORD`,`CREDITS`,`CREATED_ON`,`MODIFIED_ON`)
         VALUES
         ('$ID','$NAME','$EMAIL_ID','$PASSWORD','$CREDITS','$CREATED_ON','$MODIFIED_ON')";
         $query_run= mysql_query($query);
         $retval=mysql_query($query,$conn);
           if ($query_run)
   { echo 'It is working';
}
   mysql_close($conn);
?>
</html>

- Ashish Kumar

如果我的密码是 pas'word123 呢？看看 PDO 或如何避免 mysql 注入 https://dev59.com/oHVD5IYBdhLWcg3wL4cA?rq=1 - gbestard

2

你能展示一下你目前尝试过的吗？我们在这里是为了帮助你，而不是替你编写代码。 - James McClelland

你打算用什么来实现 AJAX？jQuery？你目前尝试过什么吗？ - cyber_rookie

我已经编写了一些代码并进行了编辑... - Ashish Kumar

不明白哪里出了错...？ - Ashish Kumar

我应该在这里使用XMLHttpRequest对象吗？还需要一些其他的库文件... - Ashish Kumar

3个回答

2

因为您的ajax位于点击函数之外，请更改您的脚本。

//on the click of the submit button 
$("#btn_submit").click(function(){

    //get the form values
 var ID = $('#ID').val();     
 var NAME = $('#NAME').val();     
 var PASSWORD = $('#PASSWORD').val();
 var CREDITS = $('#CREDITS').val();
 var EMAIL_ID = $('#EMAIL_ID').val();
 var CREATED_ON = $('#CREATED_ON').val();
 var MODIFIED_ON = $('#MODIFIED_ON').val();
 //make the postdata
 var postData = '&ID='+ID+'&NAME='+NAME+'&PASSWORD='+PASSWORD+'&REDITS'+CREDITS+'&EMAIL_ID'+EMAIL_ID+'&CREATED_ON'+CREATED_ON+'&MODIFIED_ON'+MODIFIED_ON;
 //call your .php script in the background, 
 //when it returns it will call the success function if the request was successful or 
 //the error one if there was an issue (like a 404, 500 or any other error status)

  $.ajax({
    url : "Form_Data.php",
    type: "POST",
    data : postData,
    success: function(data,status,  xhr)
     {
        //if success then just output the text to the status div then clear the form inputs to prepare for new data
        $("#status_text").html(data);
        $('#ID').val();
        $('#NAME').val('');
        $('#PASSWORD').val('');
        $('#EMAIL_ID').val('');
        $('#CREATED_ON').val('');
        $('#MODIFIED_ON').val('');
         }

}); 

});

</script>

并将您的PHP代码更改为以下内容：

<?php
include 'connnect.php';
   mysql_set_charset('utf8');
   //query for insert data into tables
if(isset($_POST['NAME'])){
   $ID = $_POST['ID'];
   $NAME =$_POST['NAME'];
   $EMAIL_ID =$_POST['EMAIL_ID'];
   $PASSWORD =$_POST['PASSWORD'];
   $CREDITS =$_POST['CREDITS'];
   $CREATED_ON=$_POST['CREATED_ON'];
   $MODIFIED_ON=$_POST['MODIFIED_ON'];


$query = "INSERT INTO `user_table` 
         (`ID`,`NAME`,`EMAIL_ID`,`PASSWORD`,`CREDITS`,`CREATED_ON`,`MODIFIED_ON`)
         VALUES
         ('$ID','$NAME','$EMAIL_ID','$PASSWORD','$CREDITS','$CREATED_ON','$MODIFIED_ON')";
         $query_run= mysql_query($query);
         $retval=mysql_query($query,$conn);
           if ($query_run)
   { echo 'It is working';
}
}
     mysql_close($conn);
?>

- Tariq hussain

0

在这段代码中，我只是提交了你的两个输入字段，其余的你可以自己添加。试试这个：

 <html>
    <body>
    Fill -ID,NAME,EMAIL_ID,PASSWORD,CREDITS,
    <form action="Form_Data.php" method="post"> 


NAME: <input id="name" type="text" name="NAME"><br><br>
PASSWORD: <input id="password" type="text" name="PASSWORD"><br><br>


<input type="submit" id="submit">
</form>

</body>
</html>

$("#submit").click(function() {
            var name= $("#name").val();
            var password= $("#password").val();

            $.ajax({
                type: "POST",
                url: "your_php_path.php",
                data: 'name=' + name+ '&password=' + password,
                success: function(result) {
                   alert(result);
                }
            });


        });

- Tariq hussain

请确保在 PHP 文件中正确命名索引名称： $name = $_POST['name']; $PASSWORD = $_POST['password']; - Tariq hussain

请将你的 HTML 页面和 PHP 页面发送给我，我会进行修复。我的邮箱是infowiz.tariq@gmail.com。 - Tariq hussain

检查一下我的新答案，它在我的端口上运行。您可以在if(isset(---)){ print_r($_POST); }之后添加一行并在脚本中警报结果来进行检查。 - Tariq hussain

请检查您的收件箱..（邮件） - Ashish Kumar

检查上面的答案问题已经解决。 - Tariq hussain

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ashish Kumar · Accepted Answer

我已经解决了...如何使用Ajax和MYSQL... PHP代码

<?php
include 'connnect.php';
   mysql_set_charset('utf8');
   //query for insert data into tables

    $ID = $_POST['ID'];
   $NAME =$_POST['NAME'];
   $EMAIL_ID =$_POST['EMAIL_ID'];
   $PASSWORD =$_POST['PASSWORD'];
   $CREDITS =$_POST['CREDITS'];
   $CREATED_ON=$_POST['CREATED_ON'];
   $MODIFIED_ON=$_POST['MODIFIED_ON'];


$query = "INSERT INTO `user_table` 
         (`NAME`,`EMAIL_ID`,`PASSWORD`,`CREDITS`,`CREATED_ON`,`MODIFIED_ON`)
         VALUES
         ('$NAME','$EMAIL_ID','$PASSWORD','$CREDITS','$CREATED_ON','$MODIFIED_ON')";
         $query_run= mysql_query($query);
        // $retval=mysql_query($query,$conn);
          if ($query_run)
          { 
                echo 'It is working';
          }

   mysql_close($conn);
?>

HTML FILE....

<html>
 <HEAD>    
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
   </HEAD>
<body>
<div id="status_text">
Fill -ID,NAME,EMAIL_ID,PASSWORD,CREDITS,

ID: <input type="text" id="ID" name="ID"><br><br>
NAME: <input type="text" id="NAME" name="NAME"><br><br>
PASSWORD: <input type="text"  id= "PASSWORD"name="PASSWORD"><br><br>
CREDITS: <input type="text" Id= "CREDITS"name="CREDITS"><br><br>
Email_ID: <input type="text" id="EMAIL_ID"name="EMAIL_ID"><br><br>
CREATED_ON:<input type="text" id="CREATED_ON" name="CREATED_ON"><br><br>
MODIFIED_ON:<input type="text" id="MODIFIED_ON" name="MODIFIED_ON"><br><br>
<input type="submit"  id="btn_submit" name="submit" value="Send"/>
</div>

<script>
<!-- 
//Browser Support Code
 function ajaxFunction(){
 var ajaxRequest;  // The variable that makes Ajax possible!

 try{
   // Opera 8.0+, Firefox, Safari
   ajaxRequest = new XMLHttpRequest();
 }catch (e){
   // Internet Explorer Browsers
   try{
      ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
   }catch (e) {
      try{
         ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
      }catch (e){
         // Something went wrong
         alert("Your browser broke!");
         return false;
      }
   }
 } }
//on the click of the submit button 
$("#btn_submit").click(function(){
    //get the form values
 var ID = $('#ID').val();     
 var NAME = $('#NAME').val();     
 var PASSWORD = $('#PASSWORD').val();
 var CREDITS = $('#CREDITS').val();
 var EMAIL_ID = $('#EMAIL_ID').val();
 var CREATED_ON = $('#CREATED_ON').val();
 var MODIFIED_ON = $('#MODIFIED_ON').val();
 // make the postdata
 // var postData = '&ID='+ID+'&NAME='+NAME+'&PASSWORD='+PASSWORD+'&CREDITS'+CREDITS+'&EMAIL_ID'+EMAIL_ID+'&CREATED_ON'+CREATED_ON+'&MODIFIED_ON'+MODIFIED_ON;
 // alert(postData);
 var myData={"ID":ID,"NAME":NAME,"PASSWORD":PASSWORD,"CREDITS":CREDITS,"EMAIL_ID":EMAIL_ID,"CREATED_ON":CREATED_ON,"MODIFIED_ON":MODIFIED_ON};
 //call your .php script in the background, 
 //when it returns it will call the success function if the request was successful or 
 //the error one if there was an issue (like a 404, 500 or any other error status)
 $.ajax({
    url : "Form_Data.php",
    type: "POST",
    data : myData,
    success: function(data,status,xhr)
     {
        //if success then just output the text to the status div then clear the form inputs to prepare for new data
        $("#status_text").html(data);
        $('#ID').val();
        $('#NAME').val('');
        $('#PASSWORD').val('');
        $('#EMAIL_ID').val('');
        $('#CREATED_ON').val('');
        $('#MODIFIED_ON').val('');
         }

}); 
}); 
</script>



</body>
</div>
</html>