Question

我需要在更改select选项后获取ajax回发的html结果。 new-result-item是新结果div html的一部分，它具有在ajax回发后从服务器端生成的值。我在这里遇到的问题是，如果我调用new-result-item是空值，虽然在ajax回发之后实际显示new-result-item的值。那么如何在回发后使用javascript或jquery获取new-result-item值？

注意：默认情况下new-result-item值为空，在ajax回发后由服务器端生成

<div id ="new-result">
  <span id="new-result-value">@Model.NewResult</span>
</div>

$('select#select-option').change(function(){
	 $.ajax({
         url: ...,
         type: "POST",
         cache: false,
         success: function (result) {
              $('#new-result').html(result);
         },
         complete: function (result) {
              alert($('#new-result-item').val());
         }
    });
});

Answer 1

你可以使用下面的示例代码通过ajax到PHP页面的POST表格数据它会起作用

<html>
<head> 
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<title>ajax test</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script>
$(document).ready(function(){
$('#restaurant').change(function()
{
if ($(this).val() == "") {
document.getElementById("txtHint").innerHTML = "";
}
else
{
$.ajax({

url: "test.php",
data : "q="+$(this).val(), //if you want to pass one variable 
//data : "name="+name+"&natives="+natives, //if you want to pass more than 1 variable
type : "POST", // if you want to pass data via get method put "GET"
success :function(text){
alert(text);
document.getElementById('txtHint').innerHTML=text;
}
});
}
});
});
</script>
</head>
<body>

<table>
<form>
<td>
<select name="restaurant" id="restaurant">
<option value="">selection</optoin>
<option value="101">DA</option>
<option value="102">FV</option>
<option value="103">CS</option>
<option value="104">TO</option>
</select>
</td>  
</form>
</table>
<b>Select restaurant</b> <div id="txtHint"></div>
</body>
</html>

test.php代码

<?php
echo $_POST['q'];
?>

Answer 2

构造$('#new-result')解析当前文档中ID为new_result的元素。与new_result_item

相同

您想解析ajax调用返回的HTML，该调用当前不在当前文档的dom中。您可以查看this stackoverflow：

     ....
     success: function (result) {
          alert($(result).find('#new-result-item').html());
     }
     ....

可能会为您提供返回的HTML代码段的内部内容

在ajax回发后获取html结果的值

2 个答案: