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

回答

相关问题