Ajax请求重定向到index.html

Question

I wrote the below code to make an ajax request to a link as shown in the below code .Instead of making an ajax call using POST request . The page gets redirected to index.html with the link in the code in the address bar .. Why is it so? pls help

<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 is undefined. Add it as a parameter for the click handler.

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

At the moment the click handler fails, and I assume the form gets submitted normally rather than via Ajax.

Answer 2

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

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

Answer 3

Why are you setting type to 'POST' if all data is passed through url ? You can use type 'GET', set url to ' http://a_webite.com/pp.php ' only and add a data parameter :

  $.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 ");
    }
  });