使用Ajax，PHP和jQuery提交表單

Question

我正在研究一個網頁，其中包含一個提示用戶輸入他/她的電子郵件地址的彈出窗口。數據應該在提交後上傳到數據庫。

但是，電子郵件地址沒有上傳到數據庫，我不知道爲什麼。數據庫連接肯定已建立，並且不會產生錯誤消息。

我是使用AJAX/jQuery的真正初學者。

內部的index.php：

<form form id="email_submit" action="insert.php" method="post" target="_top"> 

    <label>Email Address</label> 
    <input type="text" name = "emailaddress" /> 
    <input type="submit" value="Add Email" onClick="send_data_to_server()"> 
</form> 

內部insert.php：

$username = "root"; 
$password = "root"; 
$hostname = "localhost"; 
$database = "emails"; 

$dbhandle = mysql_connect($hostname, $username, $password) 
or die("0"); 
echo "Connected to MySQL <br>"; 

$selected = mysql_select_db("emails", $dbhandle) 
or die("0"); 
echo "connected to db <br>"; 

$youremail = $mysqli->real_escape_string($_POST["emailaddress"]); 
echo "$youremail"; 
mysql_query("INSERT INTO email_table (emailAddress) VALUES ('$youremail')"); 
echo json_encode($youremail); 

的AJAX腳本（放置在索引頁主體的端部）：

function send_data_to_server() { 

    $("email_submit").submit(function (ev) { 
     ev.preventDefault(); 
     $.ajax({ 
      type : 'POST', 
      url : "insert.php", 

      data : { "formData" : $("#email_submit").serialize() }, 
      datatype : 'html', 
      success: function(data) { 
       alert(data); 
      } 
     }); 
    }); 
} 

網頁上的輸出：

Connected to MySQL 
connected to db 

任何幫助表示讚賞。

Answer 1

首先，您可以將ajax函數放在<script></script>標籤之間的文件末尾。 二，編輯你的功能並用serialize()方法提交表單思想jquery。一個ID添加到您的格式如

<form id="email_submit" action="insert.php" method="post" target="_top"> 

和編輯這樣

$.ajax({ 
    type : "POST", 
    url : "insert.php", 
    data : $("#email_submit").serialize(), 
    datatype : 'html', 
    success: function(data) {   
    alert(data); 
    } 
}); 

而且功能不要忘記real_escape_string

Answer 2

來淨化你的$_POST變量的值添加這裏面的代碼（秀下面）腳本標籤<腳本> </script>

 

$("form").submit(function (ev) { 
     ev.preventDefault(); //prevent form from default submit 
     $.ajax({ 
      type: 'POST', 
      url: "localhost:8888/insert.php", 
      data: $('form').serialize() 
     }).done(function (data) { 
      console.log(data); 
     }); 
    }); 
 

使用ev.preventDefault（）防止默認提交表單
刪除FORMDATA和使用$（ '形式'）。序列化（），它將系列化你的表單輸入。

Answer 3

你的腳本部分是錯誤的。您沒有正確關閉功能。它應該更喜歡這個

function send_data_to_server() { 

    $("email_submit").submit(function (ev) { 
     ev.preventDefault(); 
     $.ajax({ 
      type : 'POST', 
      url : "insert.php", 

      data : { "formData" : $("#email_submit").serialize() }, 
      datatype : 'html', 
      success: function(data) { 
       alert(data); 
      } 
     }); 
    }); 
} 

這就是爲什麼你在你的jQuery選擇得到錯誤

SyntaxError: Unexpected token '}'. Expected ')' to end a argument list.

Answer 4

你缺少#。它應該是：

$("#email_submit").submit(function (ev) { ... 

然後，這可能會工作，但它有點奇怪。您有一個按鈕的點擊處理程序，用於在按鈕的窗體上創建提交處理程序。這有可能爲表單創建多個提交處理程序（每個按鈕單擊一個），這可能會產生不良副作用。在實踐中，按鈕通常只會被點擊一次，所以你可能會得到不能立即顯示並且很難重現的錯誤。

相反，您應該在文檔就緒處理程序中創建一次提交處理程序。根本不需要點擊處理程序，因爲點擊按鈕只是提交表單的一種方式。

$(init);         // document ready event binding 
 
function init() {       // document ready handler function 
 
    $("#email_submit").submit(ajaxSubmit); // form submit event binding 
 
} 
 
function ajaxSubmit(ev) {     // form submit handler function 
 
    ev.preventDefault(); 
 
    $.ajax({ 
 
     type: 'POST', 
 
     url: "insert.php", 
 
     data: { formData: $(this).serialize() }, 
 
     datatype: 'html', 
 
     success: function(data) { 
 
      alert(data); 
 
     } 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="email_submit" action="insert.php" method="post" target="_top"> 
 
    <label>Email Address</label> 
 
    <input type="text" name = "emailaddress" /> 
 
    <input type="submit" value="Add Email"> 
 
</form>