javascript - 为什么这个 Javascript POST 不起作用？

Question

<script language="javascript">
 function storemarker() {
     var txtTitle = document.getElementById('txtTitle').value;

     var sendInfo = { txtTitle: txtTitle

     };

     var req;
     if (window.XMLHttpRequest) {
         req = new XMLHttpRequest();
     }
     else {
         req = new ActiveXObject("Microsoft.XMLHTTP"); // IE
     }
     req.onreadystatechange = function () {
         if (req.readyState == 4 && req.status == 200) {
             var mydata = JSON.parse(req.responseText);
         }
     }
     req.open("POST", "Home.aspx/ButtonClick", true);
     req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
     req.send("txtTitle=" + txtTitle );
 }

<input type="submit" id="button" class="buttom" value="Add Road" onclick="storemarker()"/> 

[WebMethod]
    public static string ButtonClick(string txtTitle)
    {
        //return title;
        return "alert('The Button was Clicked');";
    }

我正在尝试将其作为一个小例子来实现。我刚刚检查了代码，看不出有什么问题。

谁能告诉我这段代码有什么问题吗？谢谢

Answer 1

您必须取消提交按钮的默认行为，即提交表单，或者使用普通按钮而不是提交按钮。

就目前而言，您的代码确实向服务器发送请求，但随后也提交了表单，因此页面“重新加载”。

其中一个可以工作:

<input type="submit" id="button" class="buttom" value="Add Road" onclick="storemarker(); return false;"/>

或者:

<button type="button" id="button" class="buttom" onclick="storemarker()">Add Road</button>