jquery ajax提交表單到php

我最近開始嘗試學習jQuery，但我需要一些幫助。jquery ajax提交表單到php

我有一個表格，我試圖提交，應該很簡單，但有些東西在搞亂我。我正在使用chrome的控制檯來查看發生了什麼，並且函數.php沒有被請求。此外，而不是一個POST請求，一個GET請求出現在控制檯中。

我已經在文件頭中包含了jquery。

感冒讓某人向我解釋我在這裏做錯了什麼？我嘗試了其他幾個我在論壇上找到的例子，但沒有成功。

HTML：

<form name="myPage_form" id="myPage_form"> 
    <input id="myPage_location" type="text" size="50" placeholder="Enter a location" autocomplete="on" runat="server" /> 
    <input type="text" id="myPage_city" name="myPage_city" /> 
    <input type="text" id="myPage_cityLat" name="myPage_cityLat" /> 
    <input type="text" id="myPage_cityLng" name="myPage_cityLng" /> 
    <input type="text" id="myPage_type" name="myPage_type" value="selected"/> 
    <input type="submit" value="submit"/> 
</form> 
<div id="response-div">location is:</div>

的jQuery：

$('#myPage_form').submit(function() { 
{ 
    myPage_city = document.getElementById('myPage_city'); 
    myPage_cityLat = document.getElementById('myPage_cityLat'); 
    myPage_cityLng = document.getElementById('myPage_cityLng'); 
    myPage_type = document.getElementById('myPage_type'); 

    $.ajax({ 
    url: 'functions.php', 
    data: ({myPage_type:myPage_type,myPage_city:myPage_city,myPage_cityLat:myPage_cityLat,myPage_cityLng:myPage_cityLng}), 
    type: 'post', 
    success: function(data){ 
     $('#response-div').append(data); 
    } 
    }); 
} 
});

來源

2014-11-04 Owen

感謝jQuery的教訓！我現在知道如何正確引用輸入和event.preventDefault（）。但是「而不是一個POST請求，一個GET請求出現在控制檯」是問題，沒有調用function.php是問題。謝謝反正

這解決了我的問題。只需在提交按鈕和以下內容中添加一個onlick方法：

function getCity(){ 

     event.preventDefault(); 

     myPage_city = $('#myPage_city').val(); 
     myPage_cityLat = $('#myPage_cityLat').val(); 
     myPage_cityLng = $('#myPage_cityLng').val(); 
     myPage_type = $('#myPage_type').val(); 

    $.ajax({ 
    url: 'functions.php', 
    data: ({myPage_type:myPage_type,myPage_city:myPage_city,myPage_cityLat:myPage_cityLat,myPage_cityLng:myPage_cityLng}), 
    type: 'POST', 
    success: function(data){ 
     $('#response-div').append(data); 
    } 
    }); 
}

來源

2014-11-04 15:17:42 Owen

檢查this plugin，這是我使用的任何類型的Ajax的形式，你能想到的。你可以做所有的工作manualy，但沒有理由。

PS。如果你想要去的jQuery，如果你使用jQuery，你爲什麼要使用document.get*功能改變

myPage_city = document.getElementById('myPage_city');

到

myPage_city = $('#myPage_city');

來源

2014-11-04 14:45:31

。試試這個：

$('#myPage_form').submit(function (e) { 
    { 
     e.preventDefault(); // < -- To stop form submission 

     myPage_city = $('#myPage_city').val(); 
     myPage_cityLat = $('#myPage_cityLat').val(); 
     myPage_cityLng = $('#myPage_cityLng').val(); 
     myPage_type = $('#myPage_type').val(); 

     $.ajax({ 
      url: 'functions.php', 
      data: ({ 
       myPage_type: myPage_type, 
       myPage_city: myPage_city, 
       myPage_cityLat: myPage_cityLat, 
       myPage_cityLng: myPage_cityLng 
      }), 
      type: 'POST', 
      success: function (data) { 
       $('#response-div').append(data); 
      } 
     }); 
    } 
    });

或者，只是使用.serializeArray功能（API Doc）：

$('#myPage_form').submit(function (e) { 
    { 
     e.preventDefault(); // < -- To stop form submission 

     var data = $(this).serializeArray(); 

     $.ajax({ 
      url: 'functions.php', 
      data: data, 
      type: 'POST', 
      success: function (data) { 
       $('#response-div').append(data); 
      } 
     }); 
    } 
    });

來源

2014-11-04 14:47:31

$('input[type="submit"]').click(function(event) { 
    event.preventDefault(); 

    myPage_city =$('#myPage_city').val(); 
    myPage_cityLat = $('#myPage_cityLat').val(); 
    myPage_cityLng = $('#myPage_cityLng').val(); 
    myPage_type = $('#myPage_type').val(); 

    $.ajax({ 
    url: 'functions.php', 
    data:({myPage_type:myPage_type,myPage_city:myPage_city,myPage_cityLat:myPage_cityLat,myPage_cityLng:myPage_cityLng}), 
    type: 'post', 
    success: function(data){ 
     $('#response-div').append(data); 
    } 
    }); 
});

來源

2014-11-04 15:00:41

jquery ajax提交表單到php

回答

相關問題