如何使用AJAX獲取輸入字段的值並將其傳遞給PHP字符串？

Question

我是JavaScript新手，所以原諒我缺乏知識。

我正在嘗試編寫聯系表單並希望在訪問者使用AJAX輸入的值時將輸入的值輸入特定的輸入文本字段，並將其傳遞給PHP字符串，以便我可以根據值顯示相關信息在點擊提交按鈕之前輸入。

我怎么能用jQuery做到這一點？

以下是我用於表單的代碼：

<form method="post" action="">
<input type="text" id="name" name="name" />
<input type="text" id="email" name="email" />
<input type="text" id="subject" name="subject" />
<input type="text" id="url" name="url" />
<input type="checkbox" id="showdetails" name="showdetails" /> Show URL Details
<input type="submit" value="Submit" />
</form>`

我需要URL輸入字段的值傳遞給php字符串（一旦用戶檢查showdetails checkbok），我就可以在后台處理它以顯示基於url的信息。

Answer 1

給出這個HTML：

<form method="post" action="">
<input type="text" id="name" name="name" />
<input type="text" id="email" name="email" />
<input type="text" id="subject" name="subject" />
<input type="text" id="url" name="url" />
<input type="checkbox" id="showdetails" name="showdetails" /> Show URL Details
<input type="submit" value="Submit" />
</form>

jQuery（復選框）

$(function() {
  $("showdetails").on("click",function() {
    var url = $("#url").val();
    if (url && $(this).is(":checked")) {
      $.get("relevantinfo.php",
        { "url": url },
        function(data){
          // do something with data returned
        }
      );
    }
    else {
      // clear relevant info here
    }
  });
});

接收端： 從AJAX中檢索POST數據調用PHP

Answer 2

使用文本字段中的onchange事件獲取輸入字符串。

參考： https ： //developer.mozilla.org/en-US/docs/DOM/element.onchange

然后使用該字符串內容，調用AJAX函數。

function load(string) {
    var xmlhttp;
    if(window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", "YOUR_URL", true);
    xmlhttp.send();
}

正如評論中所建議的那樣，使用jquery + AJAX。 對於jquery，

$.ajax({
    url: 'ajax/test.html',
    success: function(data) {
        $('.divClass').html(data);
        alert('Load was performed.');
    }
});