發送多個HTML表單 <select>使用AJAX通過POST請求框？
[英]Sending HTML Form Multiple <select> box via POST request with AJAX?
問題描述
我有一個帶有多個選擇框的html表單。 我無法弄清楚如何使用AJAX通過發布請求將值發送到我的php應用程序。 如果我使用GET請求並使用單個選擇框，但是當我使用多選框時，它可以正常工作。 這個想法是讓用戶保持控制（或使用mac命令）並選擇一個或多個類別。 根據選擇的類別，將確定使用AJAX顯示哪些其他表單選項。 選擇框如下所示：
編輯：已解決
<select multiple name="categories[]" onclick="sendCategories(this)">
<option value="0">Category 1</option>
<option value="1">Category 2</option>
<option value="2">Category 3</option>
</select>
我的javascript函數如下所示：
function sendCategories(sel){
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("my_div").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","http://www.mysite.com/update_categories.php",true);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
var values = $(sel).serialize();
xmlhttp.send(values);
}
4 個解決方案
解決方案1
4 已采納 2013-02-08 05:29:51
您必須生成查詢字符串，才能自行發送POST。 這是要使用的HTML標記：
<select multiple name="categories[]" onchange="sendCategories(this);">
和Javascript功能：
function sendCategories(sel){
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
document.getElementById("my_div").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("POST","http://www.mysite.com/update_categories.php",true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var values = [], i, j, cur;
for (i = 0, j = sel.options.length; i < j; i++) {
cur = sel.options[i];
if (cur.selected) {
values.push(encodeURIComponent(cur.value));
}
}
if (values.length) {
values = encodeURIComponent(sel.name) + "=" + values.join("&" + encodeURIComponent(sel.name) + "=");
} else {
values = null;
}
xmlhttp.send(values);
}
請注意，我將事件從onclick更改為onchange ，但是這取決於您是否希望在單擊元素時運行此函數，或者其值是否真正更改...它可以減少一些不必要的調用。
這將生成一個查詢字符串，該字符串通常用於發送<select>了多個選項的<select>值。
這是一個jsFiddle，它演示了如何在這里生成查詢字符串： http ： //jsfiddle.net/kKWQM/
解決方案2
2 2013-02-08 05:20:47
你可以這樣做，
<select multiple name="categories[]" onclick="sendCategories(this)">
然后使用JQuery制作AJAX，
function sendCategories(sel){
var values = $(select).serialize();
console.log (values); // See if you get the serialized data in console.
$.ajax({
type: 'POST',
url: "http://www.mysite.com/update_categories.php"
data: values,
success: function (data) {
document.getElementById("my_div").innerHTML = data;
}
});
}
而僅供參考，網景事件綁定模型已被棄用，你可以使用這樣的跨瀏覽器的事件綁定這個
解決方案3
1 2015-06-10 01:10:48
您可以實現解決方案，但是您想使用JS字符串和數組函數。 實際上，您需要發送給Apache的字符串應包含類似以下內容的模式：
xxx[]=a&xxx[]=b&xxx[]=c
其中SELECT元素的名稱是表單中的xxx[] ，a，b和c是用戶選擇的三個值。
因此，是的，您重復鍵名的次數與用戶在SELECT中選擇其他選項的次數相同。
在JS中，您可以使用一組選定的選項：
selected_options.join("&xxx[]=") to produce that pattern.
解決方案4
0 2013-02-08 05:28:12
jQuery應該使您更容易。 在包裝的選擇上調用.val（）將返回所選值的數組。 您只需將這些發布到服務器：
HTML：
<html>
<body>
<form>
<select name="mySelect" multiple="on">
<option value="1">Uno</option>
<option value="2">Dos</option>
<option value="3">Tres</option>
</select>
</form>
<input id="submitButton" type="button" value="Click To Submit"/>
</body>
</html>
JavaScript的：
$(function() {
$('#submitButton').click(function() {
var valuesArray = $('select[name=mySelect]').val()
$.ajax({
type: 'POST',
url: '/path/to/php', // your php url would go here
data: { mySelect: valuesArray }
}).done(function(msg) {
// parse response from msg
});
});
});
將 ajax 的 Post 請求從選擇框發送到 PHP 頁面
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.