Question

我创建了一个小的ajax函数包装器来启动$.ajax请求。
它可以工作，但是当尝试在.done，.fail或.always中添加函数时，出现此错误：TypeError: e is undefined。

这是我的javascrip / jquery ajax代码：

var $ajaxScript = 'scripts/ajax.php';  //  controller-script that handles all ajax request
/**
 *  ajax wrapper()
 *  $_POST array with form posts
 */
function submitAjax($_POST){
    ajaxObj = $.ajax({url:$ajaxScript, data:$_POST, type:'POST', dataType:'json' });
    return ajaxObj;
}

因为所有的ajax表单提交都是通过ajax.php发送的，并且针对这些请求返回的数据响应始终设置为json，所以我认为这是一种方便的方法。
这使我能够通过将类ajax添加到表单中来创建一种执行“默认” ajax请求的快速方法。

$(function(){
    $("form.ajax").submit(function(e){
        e.preventDefault();
        submitAjax($(this).serialize())
        .done(function(data,statusText,jqXHR){
            $(this).prepend('<div class="notice"><p class="icon">'+data['msg']+'</p></div>');  //  *--  this triggers a "TypeError"
            console.log('done : '+statusText);  //  <--  this alone doesn't throw any error
        })
        .fail(function(){
            console.log('fail');
        })
        .always(function(){
            console.log('always');
        });
    });
});

如果我需要以其他方式处理ajax请求，可以通过为其创建一个新函数来实现：

$(function(){
$("#updRecipe").submit(function(e){
    e.preventDefault();
    /* do stuff before */
    var $Ajax = submitAjax($(this).serialize());
    /* do some more stuff */
    Ajax.done(function(){

    });
    /*  ...  do stuff at the end  ...  */
});
});

这是我使用的表单布局：
通过添加类ajax，使用顶部的代码将表单视为ajax请求。
ajax.php使用隐藏字段“ load-ajax”来确定请求使用什么脚本。
submit按钮的名称是要执行脚本的哪个部分或部分的标识符。

<form class="ajax">
    <input type="hidden" name="load-ajax" value="Recipe">
    <input type="text" name="name" value="<?=$get_recipe['name']?>">
    <input type="submit" name="submit__updName" value="Oppdater oppskrift">
</form>

当我什么都没有，或者方法里面只有console.log()时，代码将起作用。但是，当我尝试添加其他jquery函数时，它会失败。

TypeError: e is undefined，并且代码未正确执行。或者，不能正确执行返回给用户的输出。

我在做什么错了？
仅当在其中一种方法中添加函数时才会发生错误...

Answer 1

this调用的.done回调内的

$.ajax指的是jqXHR，它是一个Ajax event-基本上是XHR调用本身的包装。

因此，不再是<form>（或者在某些情况下（而不是您的情况下），它是发起自定义提交功能的<button）。

因此，如果要在回调中引用<form>，则必须将对它的引用放在选择的变量内：

$("form.ajax").submit(function(e){
  e.preventDefault();
  let $form = $(this);

  /* do stuff before
   * `this` is <form> 
   */

   var $Ajax = submitAjax($(this).serialize());
   Ajax.done(function(){

     /* in here `this` is third param of the function, 
      * the jqXHR event 
      */

      $form.prepend('...');
    });

  /*  ...  do stuff at the end  
   *  `this` is still <form>  
   */
});

TypeError：将.done链接到Ajax包装函数时未定义e

1 个答案: