Question

我正在尝试创建一个表单，在单击时创建XMLHttpRequest并在页面上写入信息。

这是HTML代码。

<form>
<input id="myStock" type="text"/>
<input id="iSubmit" type="submit" value="Show Me Data"/>
<input type="reset" value="Reset Me" />
</form>
<div id="demo"></div>

这是JS代码：

var isubmit = document.getElementsByTagName("form")
[0].querySelector('input[type="submit"]');
isubmit.addEventListener("click", myFunction);
function myFunction() {
//some code here
 }
 var mystock = document.getElementsByTagName("form")
 [0].querySelector('input[type="text"]').value.trim();
 var urlext = mystock;
 urlext += 
 "&reportType=is&period=12&dataType=A&order=asc&columnYear=5&number=3";
  var url = "https://financials.morningstar.com/ajax/ReportProcess4CSV.html?
  t=";
 alert(url + urlext);
 xhttp.open("GET", url + urlext, true);
 xhttp.send();
 }

问题是，当我删除HTML页面上的<form>标记并删除JS代码上的getElementsByTagName("form")[0]时，它工作正常。

但是，如果表单元素完好无损，则不会返回任何信息。

请帮忙。

Answer 1

你的问题是@CBroe指出的输入提交。您可以阻止使用e.preventDefault();。

或者您可以使用：

＆＃13;

$('#iSubmit1').on('click', function(){
var value = $("#myStock").val();
$( "#demo" ).append( '<p>'+value+'</p>' );
});
		
    

$('#reset1').on('click', function(){
$( "p" ).remove();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input id="myStock" type="text"/>
<button id = "iSubmit1" type="button">Show Me Data!</button> 
<button id = "reset1" type="button">Reset Me!</button> 
</form>
<div id="demo"></div>

＆＃13;

Answer 2

你可以看看我制作的这个JSfiddle。我不知道它是否会帮助你。

     $.POST( url+urltext, function( data ) {
 $('#demo').html(data);
});

表单元素不适用于XMLHttpRequest方法

2 个答案: