使用Ajax提交表单并避免页面刷新

Question

我在status.php文件中有这段简单的代码：

<script type="text/javascript">  
    $(document).ready(function() {  
        $("form#iscrizione").submit(function(){   
            var ordine = $("#ordine").val();  
            var cognome = $("#cognome").val();
            $.ajax({  
                type: "POST",
                url: "http://****/new/action.php",  
                data: "cognome=" + cognome + "&ordine=" + ordine,
                dataType: "html",
                success: function(risposta) {  
                    $("div#risposta").html(risposta);  
                    alert("ok!");
                },
                error: function(){
                    alert("Chiamata fallita!!!");
                } 
            }); 
            return false;  
        });
    });
</script>  

在我的页面（status.php）中，它可以工作！但是当我把status.php的框架放在index.php中时，它不起作用，并且只更改url，例如：?cognome=Esposito&ordine=2121237391。为了使它作为index.php的框架工作，我应该怎么做呢？

- Genny

---

为什么需要使用框架？ - GiamPy

index.php和status.php不是在不同的目录中吗？ - NavidIvanian

e.preventDefault();? - aldrin27

是的，它们在同一个目录中。 e.preventDefault(); -> 它不起作用。 - Genny

Answer 1

我使用了

  type: "GET",
  url: "https://dev59.com/44_ea4cB1Zd3GeqPJRHN", 

替代你的

   type: "POST",
  url: "http://****/new/action.php",  

AND it works fine. (Just click on "Run snippet", it shows an error because the url doesn't support cross-domain)

$(document).ready(function() {  
  $("form#iscrizione").submit(function(){   
    var ordine = $("#ordine").val();  
    var cognome = $("#cognome").val();
    $.ajax({  
      type: "GET",
      url: "https://dev59.com/44_ea4cB1Zd3GeqPJRHN",  
      data: "cognome=" + cognome + "&ordine=" + ordine,
      dataType: "html",
      success: function(risposta) {  
        $("div#risposta").html(risposta);  
        alert("ok!");
      },
      error: function(){
              alert("Chiamata fallita!!!");
}
    }); 
    return false;  
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="iscrizione"> 
  
  <input type="text" value="get" id="cognome"><input type="text" value="get" id="ordine"><input type="submit" value="get"></form><div id="risposta"></div>

- Elias Nicolas