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

我更新了“ajax / calendar.php”以接受之前硬编码的值：

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

编辑：我的控制台告诉我，事件处理程序中的函数调用无法识别参数。

有人看到我的问题是什么吗？如果您认为有更好的方法可以实现此功能，我也会喜欢一些设计建议。

Answer 1

函数定义中使用的变量名称应与函数中使用的名称相匹配。那是

{startDate : strDte, endDate : endDte}

应该是

{startDate : startD, endDate : endD}

我建议你玩这个小提琴：View jsFiddle example

它使用来自JSFiddle的服务来回显您发送给它的内容。我改变了AJAX调用以使用$ .post（）而不是$ .ajax（），因为这是你正在玩的函数！：）

学习此类技术时的一些额外提示。请务必查看浏览器开发人员的工具。在那里，您可以按照发送到后端的请求并捕获任何错误。在这种情况下，“网络”和“控制台”（在Chrome开发工具上，但Firefox也有类似的标签）是你的朋友！

享受快乐学习！

Answer 2

您传递的是表单元素，而不是元素的值。你有错误的变量名。

输入输入ID

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

您通过直接通过名称/ ID引用元素来使用不良做法，并且内联事件不是最好用的。您应该使用getElementById或querySelector来引用元素。

Answer 3

您传递给函数的变量名称必须传递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);
  });
};

<强>更新现在，我知道最好的方法产生的混淆是允许您将JS从HTML中分离出来的。

根据您的建议请求，请参阅：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

由于您没有使用表单，因此您应该声明您的按钮是一种按钮类型，以表明您没有提交表单。

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

您的问题是，您没有为<input>代码提供 ID 属性。 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);
    }
});

Answer 5

这是一个简单的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
               }
           }
       });
    });

});

AJAX / jQuery $ .get方法有效，但$ .post没有

5 个答案: