Ajax请求重定向到index.html

Question

我编写了以下代码以对链接进行ajax请求，如下面的代码所示，而不是使用POST request进行ajax调用。 通过地址栏中代码中的链接将页面重定向到index.html ..为什么会这样？ 请帮助

<script type="text/javascript" language="javascript">

$(document).ready(function() {

  $("#button").click(function() {
    $("#form1").validationEngine();
    if($('div input[type=text]').val() != "")
    {
      var textfield2=document.getElementById("textfield2").value;
      var textarea=document.getElementById("textarea").value;
      var urls="http://a_webite.com/pp.php?textfield2="+encodeURIComponent(textfield2)+"&textarea="+encodeURIComponent(textarea);
      //alert(url);
      $.ajax({
        type: "POST",
        url: urls,
        success: function(result) {
          $("#Sales_Body").empty().html("<h2>Your request has been received ");
        }
      });
    }
  }); 
});
</script>

Answer 1

event未定义。 将其添加为单击处理程序的参数。

$("#button").click(function(event){
     event.preventDefault();

目前，点击处理程序失败了，我认为表单是正常提交​​的，而不是通过Ajax提交的。

Answer 2

一种简单的方法也是将按钮输入类型更改为button，而不是提交。

        <input type="button" value="Hit me /> 

Answer 3

如果所有数据都通过url传递，为什么将type设置为'POST'？ 您可以使用“ GET”类型，仅将url设置为“ http://a_webite.com/pp.php ”并添加数据参数：

  $.ajax({
    type: "GET",
    url: "http://a_webite.com/pp.php",
    data: {'textfield2': $('#textfield2').val(), 'textarea': $('#textarea').val()},
    success: function(result) {
      $("#Sales_Body").empty().html("<h2>Your request has been received ");
    }
  });