Question

我正在尝试我的第一个Phonegap应用程序 - 以及我的第一个AJAX调用。

我有一个xmlhttp请求返回ColdFusion提供的JSON。它动态构建表单。这非常有效。但是当我尝试通过AJAX提交该表单时 - 对于屏幕刷新，它不起作用。表单不提交（如下所示）或者如果我将“按钮”更改为“提交” - 它会离开页面并转到不是我想要的链接。

我可以在这样的动态表单上进行AJAX发送吗？或者我是否应该采用另一种方式构建此表单？不确定协议是什么......

<div id="simple-msg"></div>

<script>
var xmlhttp = new XMLHttpRequest();
var url = "http://flightderby.bigfatdev.com/phonegap/Instant_Game_Create.cfm";

xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        myFunction(xmlhttp.responseText);
    }
	
}
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(response) {
    var arr = JSON.parse(response);
    var i;
    var out = "<form name='instantRaceForm' id='instantRaceForm' method='post' action='http://www.bigfatdev.com/phonegap1/GetUsers.cfm'><div id='InstantGameFlightList'><ul>";

    for(i = 0; i < arr.length; i++) {
    
		out += "<li><div class='IconSelector'><input name='ChosenWinner' type='radio' value='" +
arr[i].ChosenWinner +
"' id='ChosenWinner_" +
arr[i].ChosenWinner +
"'  /><label for='ChosenWinner_" +
arr[i].ChosenWinner +
"'><div class='" +
arr[i].Icon +
"'></div></label><div class='IG_Payout'>" +
arr[i].FractionOdds + 
"- 1</div></div><div class='Details'><div class='Airline'>" +
arr[i].Airline +
"</div><div class='FlightNumber'>Flight " +
arr[i].FlightNumber +
"</div><div>From: " +
arr[i].FromAirport +
"</div><div>To: " +
arr[i].ToAirport +
"</div><div>Flight Time: " +
arr[i].FlightTime +
"</div></div></li>";
		
		
    }
    out += "</ul><input name='Case' id='Case'  type='hidden' value='Submit' /><input type='button'  id='simple-post' value='Place Wager!' class='ActionBtn' /></div></form>"
    document.getElementById("simple-msg").innerHTML = out;
}

</script>

<script>
$(document).ready(function() {
	
  $('#simple-menu').sidr();

	$("#simple-post").click(function()
	{
		$("#instantRaceForm").submit(function(e)
		{
			$("#simple-msg").html("<img src='img/loading-blue.gif' style='width:30px; height30px;'/>");
			var postData = $(this).serializeArray();
			var formURL = $(this).attr("action");
			$.ajax(
			{
				url : formURL,
				type: "POST",
				data : postData,
				success:function(data, textStatus, jqXHR) 
				{
					$("#simple-msg").html('<pre><code class="prettyprint">'+data+'</code></pre>');
	
				},
				error: function(jqXHR, textStatus, errorThrown) 
				{
					$("#simple-msg").html('<pre><code class="prettyprint">AJAX Request Failed<br/> textStatus='+textStatus+', errorThrown='+errorThrown+'</code></pre>');
				}
			});
			e.preventDefault();	//STOP default action
			e.unbind();
		});
			
		$("#instantRaceForm").submit(); //SUBMIT FORM
	});
  
});

</script>

Answer 1

如果您正在使用ajax，那么您不需要提交常规表单。

你已经用e.preventDefault()做了正确的事情，然后通过提交来破坏那项好工作，doh！

删除该行：

$("#instantRaceForm").submit(); //SUBMIT FORM

并将按钮更改为type="submit"

另一个问题......当您尝试附加提交处理程序时，表单不存在，因此它不起作用。这可以通过＆＃34;委托＆＃34;来解决。提交处理到祖先元素 - 例如document - 如下：

$(document).on('click', "#simple-post", function() {
    ...
});

动态javascript jSon构建表单不通过ajax提交 - Phonegap

1 个答案: