未在提交按鈕上運行的Ajax腳本單擊

我正在按照教程進行操作，當單擊「提交」按鈕時什麼也沒有發生。我添加了一個警報來查看函數是否運行。它運行警報。未在提交按鈕上運行的Ajax腳本單擊

[代碼]

<!-- THE HTML PAGE AND JAVASCRIPT --> 

<html> 
<head> 
<script language="JavaScript" type="text/javascript"> 
function ajax_post(){ 


    // added by me to test 
    alert("Hello"); 

    // Create our XMLHttpRequest object 
    var hr = new XMLHttpRequest(); 
    // Create some variables we need to send to our PHP file 
    var url = "my_parse_file.php"; 
    var fn = document.getElementById("first_name").value; 
    var ln = document.getElementById("last_name").value; 
    var vars = "firstname="+fn+"&lastname="+ln; 
    hr.open("POST", url, true); 
    // Set content type header information for sending url encoded variables in the request 
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    // Access the onreadystatechange event for the XMLHttpRequest object 
    hr.onreadystatechange = function() { 
     if(hr.readyState == 4 && hr.status == 200) { 
      var return_data = hr.responseText; 
      document.getElementById("status").innerHTML = return_data; 
     } 
    } 
    // Send the data to PHP now... and wait for response to update the status div 
    hr.send(vars); // Actually execute the request 
    document.getElementById("status").innerHTML = "processing..."; 
} 
</script> 
</head> 
<body> 
<h2>Ajax Post to PHP and Get Return Data</h2> 
Your First Name: <input id="first_name" name="first_name" type="text" /> 
<br /><br /> 
Your Last Name: <input id="last_name" name="last_name" type="text" /> 
<br /><br /> 
<input name="myBtn" type="submit" value="Submit Data" onClick="javascript:ajax_post();"> 
<br /><br /> 
<div id="status"></div> 
</body> 
</html>

[PHP]

<?php 
echo 'Thank you '. $_POST['firstname'] . ' ' . $_POST['lastname'] . ', says the PHP file'; 
?>

我在做什麼錯在這裏？它根本不會給出任何錯誤。請幫幫我。

http://jsfiddle.net/HjhV4/

來源

2013-08-26 IceDawg

試試這個

HTML

<h2>Ajax Post to PHP and Get Return Data</h2> 
<form id="form"> 
Your First Name: <input id="first_name" name="first_name" type="text" /> 
<br /><br /> 
Your Last Name: <input id="last_name" name="last_name" type="text" /> 
<br /><br /> 
<input name="myBtn" type="submit" value="Submit Data"> 
<br /><br /> 
</form> 
<div class="status"></div>

的JavaScript

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$("#form") .submit(function(){ 
var first_name = $("#first_name") .val(); 
var last_name = $("#last_name") .val(); 

var s = { 
"first_name":first_name, 
"last_name":last_name 
} 

$.ajax({ 
url:'action.php', 
type:'post', 
data:s, 
beforeSend: function(){ 
     $(".status") .html("<img src=\"style/img/ajax/load1.gif\" alt=\"Loading ....\" />"); 
     }, 
success:function(data){ 
$(".status").html(data); 
} 
}); 

}); 
}) 
</script>

來源

2013-08-27 01:04:05

未在提交按鈕上運行的Ajax腳本單擊

回答

相關問題