jquery ajax submit form to php

Question

Я недавно начал изучать jquery, но мне нужна помощь.

У меня есть форма, которую я пытаюсь представить, должна быть простой, но что-то меня пугает. Я использую консоль хром, чтобы посмотреть, что происходит, и функции.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); 
    } 
    }); 
} 
}); 

Answer 1

Спасибо за уроки по JQuery! Теперь я знаю, как правильно обращаться к входам и event.preventDefault(). Однако «вместо запроса POST появляется запрос GET в консоли». Проблема была вызвана не функцией function.php. Спасибо anyways

Это решило мою проблему. Просто добавьте метод onlick к кнопке submit и следующему:

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); 
    } 
    }); 
} 

Answer 2

Проверить this plugin, это то, что я использую для любого типа AJAX-формы вы можете думать. Вы можете выполнить всю работу, но нет причин для этого.

пс. если вы хотите пойти JQuery, изменить

myPage_city = document.getElementById('myPage_city'); 

в

myPage_city = $('#myPage_city'); 

Answer 3

Если вы используете JQuery, почему вы используете document.get* функции. Попробуйте это:

$('#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); 
      } 
     }); 
    } 
    }); 

Answer 4

$('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); 
    } 
    }); 
});