AJAX/jQuery $ .get метод работает, но $ .post не

Question

Вчера я сделал свой первый успешный вызов AJAX, используя эту функцию, связанную с событием нажатия кнопки.

function function1(){ 
    $.get("ajax/calendar.php", function(data){ 
    $('#ajaxResponse').html(data); 
    }); 
}; 

Теперь я хотел бы использовать $ .post метод , так что я могу передать в 2-х значений, которые я просто трудно закодированных, когда я использовал $ .get метод .

Вот мои входы и кнопка отправки:

<div ... > 
    <div ... > 
    <div ... > 
     <span ... >From:</span> 
     <input ... name="strDte"> 
    </div>  
    <div ...> 
     <span ... >To: </span> 
     <input ... name="endDte"> 
    </div>     
    </div> 
    <div ... > 
    <button type="submit" onclick="dateRange(strDte, endDte)">OK</button> 
    </div> 
</div> 

Я создал аналогичную функцию моего метода $ .get:

function dateRange(startD, endD){ 
    $.post("ajax/calendar.php", {startDate : strDte, endDate : endDte}, function(data){ 
    $('#ajaxResponse').html(data); 
    }); 
}; 

и я обновил "Аякса/calendar.php" принять значение, которое было жестко закодированы перед:

$formStartDate = $_POST['startDate']; 
$formEndDate = $_POST['endDate']; 

РЕДАКТИРОВАТЬ: моя консоль сообщает мне, что параметры не распознаются вызовом функции в обработчике событий.

Кто-нибудь видит мою проблему? Мне также понравятся некоторые предложения по дизайну, если вы считаете, что есть лучший способ достичь этой функции.

Answer 1

Вы передаете элементы формы, а не значения элементов. У вас неправильные имена переменных.

Дайте входы иды

<input ... name="strDte" id="strDte"> 
<input ... name="endDte" id="endDte"> 

Обновление JavaScript для ссылки на значение.

function dateRange(startD, endD){ 
    $.post("ajax/calendar.php", {startDate : startD.value, endDate : endD.value}, function(data){ 
    $('#ajaxResponse').html(data); 
    }); 
}; 

Вы используете плохую практику путем ссылки на элементы непосредственно их имя/Ид и коридорные события не самая большая вещь для использования. Вы должны использовать getElementById или querySelector для ссылки на элементы.

Answer 2

Имена переменных, которые вы передаете в функцию, должны передавать те, которые вы используете в параметре data$.post(). Вы прохождения:

startD но пытается использовать strDte .. и
endD но пытается использовать endDte .... strDte и endDte не определены в любом месте.

Попробуйте вместо этого:

function dateRange(startDate, endDate){ 
    $.post("ajax/calendar.php", {startDate : startDate, endDate : endDate}, function(data){ 
    $('#ajaxResponse').html(data); 
    }); 
}; 

UPDATE Теперь, когда я знаю, где путаница исходит от лучшего подхода является один, который позволяет отделить, ясно, ваши JS из вашего HTML.

По Вашему запросу для предложений, вот как:

$(function() { 
 
    $('#my_form').on('submit', function(event) { 
 
     //stop the form from submitting via default submission 
 
     event.preventDefault(); 
 
     //get form data 
 
     var formData = $(this).serialize(); 
 
     //see what the data looks like 
 
     console.log(formData); 
 
     //make ajax call 
 
     $.post('ajax/calendar.php', formData, function(data){ 
 
      $('#ajaxResponse').html(data); 
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form id="my_form"> 
 
    <div><label for="strDte">Start Date:</label> 
 
    <input type="text" name="startDate" id="strDte"/> 
 
    </div> 
 
    <div><label for="endDte">End Date:</label> 
 
    <input type="text" name="endDate" id="endDte"/> 
 
    </div> 
 
    <div> 
 
    <input type="submit" value="OK" /> 
 
    </div> 
 
</form>

Answer 3

Имена переменных, используемых в определении функции должны совпадать с именами, которые вы используете в вашей функции. Это

{startDate : strDte, endDate : endDte} 

должен быть

{startDate : startD, endDate : endD} 

Я предлагаю вам поиграть с этой скрипкой: http://jsfiddle.net/Uwcuz/3657/

Он использует услугу от JSFiddle эхо обратно то, что вы посылаете к нему. Я изменил вызов AJAX на использование $ .post() вместо $ .ajax(), так как это функция, с которой вы играете!:)

Некоторые дополнительные советы при изучении таких технологий. Всегда проверяйте с помощью инструментов разработчиков браузеров. Там вы можете выполнить запрос, отправленный на ваш сервер, и поймать любые ошибки. «Сеть» и «Консоль» (в инструментах Chrome dev, но Firefox тоже похож) вкладки - ваши друзья в этом случае!

Наслаждайтесь и наслаждайтесь!

Answer 4

вот простой Ajax пост вы можете играть с ...

<input id="start_date" name="startDate" /> 
<input id="end_date" name="endDate" /> 
<button type="submit" id="submit_dates">Submit</button> 

$(document).ready(function(){ 

    $("button#submit_dates").click(function(){ 
     var startDate = $("#start_date").val(); 
     var endDate = $("#end_date").val(); 
     $.ajax({ 
      type:'POST', 
      url:'ajax/calendar.php', 
      data:"startDate=" + startDate + "&endDate=" + endDate, 
      success:function(data) { 
       if(data) { 
        $("#ajaxResponse").html(data); 
       } else { 
        // no response 
       } 
      } 
     }); 
    }); 

}); 

Answer 5

Поскольку вы не используете форму, вы должны объявить свою кнопку, чтобы быть тип кнопки, чтобы показать, что вы не представляя форму.

<button id="submitBtn" type="button">OK</button> 

Ваша проблема заключается в том, что вы не поставляя ID атрибут для ваших <input> тегов. name используется только в формах. Измените <input> теги быть

<input id="strDte"> 
<input id="endDte"> 

Затем в сценарии, вы можете использовать

$("#submitBtn").click(function() { 
    var start = $("#strDte").val(); 
    var end = $("#endDte").val(); 
    $.post("ajax/calendar.php", { startDate: start, endDate: end }, function (data) { 
     $("#ajaxResponse").html(data); 
    } 
});