Javascript 向函数传递一些指令_Javascript_Php_Jquery

Javascript 向函数传递一些指令

javascript php jquery

Javascript 向函数传递一些指令,javascript,php,jquery,Javascript,Php,Jquery,我正在尝试删除一个主要形式的js代码，该代码执行ajax请求，我最初执行一个php函数，该函数生成任何形式的提交函数，并将不同的代码作为参数传递，但看起来不太好。在我尝试使用javascript函数之后，对于简单变量，我使用了它，例如： // <script> inside of the page generate by php (and in some cases in html received by other ajax request) $('#f_man-marker_e

我正在尝试删除一个主要形式的js代码，该代码执行ajax请求，我最初执行一个php函数，该函数生成任何形式的提交函数，并将不同的代码作为参数传递，但看起来不太好。在我尝试使用javascript函数之后，对于简单变量，我使用了它，例如：

// <script> inside of the page generate by php (and in some cases in html received by other ajax request)
$('#f_man-marker_edit-marker').on('submit', function(e){
    TM.editMarker(e, $(this), 'man-marker_edit-marker');
});

...
// in other js file
TM.editMarker = function (e, form, ajax_request) {
    // stop browser from submitting form!
    e.preventDefault();

    // Abort any pending request
    if (request) request.abort();

    // Let's select and cache all the fields
    let inputs = form.find("input, select, button, textarea");

    // Serialize the data in the form
    let serializedData = form.serialize();

    // Let's disable the inputs for the duration of the Ajax request.
    // Note: we disable elements AFTER the form data has been serialized.
    // Disabled form elements will not be serialized.
    inputs.prop("disabled", true);

    request = $.ajax({
        url: "ajax.php?req=" + ajax_request,
        type: "post",
        data: serializedData,
        dataType: "html"
    });

    request.done(function (response) {
        $("#ajaxoutput2").empty().append(response);
        $("#ResultModal2").modal("show");
    });

    request.fail(function (jqXHR, textStatus, errorThrown) {
        console.error(
            "Ajax " + ajax_request + " request failed. The following error occurred: " +
            textStatus, errorThrown
        );
    });

    request.always(function () {
        inputs.prop("disabled", false);
    });

};

...
// "f_man-marker_add-marker" is the id of the form, "man-marker_add-marker" is the id of the ajax request, $man_marker_jap1 contain that instructions printed inside of request.done function (they can be different on any form)

TM\UI\JSHelper::jqueryAjaxPost(
            "f_man-marker_add-marker", "man-marker_add-marker", $man_marker_jap1);

.....
// in the file of TM\UI\JSHelper:

...
/**
     * Generate a jquery ajax of type post and datatype html
     * will call the url ajax.php?req=$request_name
     * and request.done will do what define in $done_content
     *
     * @param string $form_id Id of the form
     * @param string $request_name Name of the ajax request parameter
     * @param string $done_content Content of request.done
     */
    public static function jqueryAjaxPost(string $form_id, string $request_name, string $done_content){
        echo <<<HTML

$("#$form_id").submit(function(event){

    // Prevent default posting of form - put here to work in case of errors
    event.preventDefault();

    // Abort any pending request
    if (request) { request.abort(); }

    let form = $(this);

    // Let's select and cache all the fields
    let inputs = form.find("input, select, button, textarea");

    // Serialize the data in the form
    let serializedData = form.serialize();

    // Let's disable the inputs for the duration of the Ajax request.
    // Note: we disable elements AFTER the form data has been serialized.
    // Disabled form elements will not be serialized.
    inputs.prop("disabled", true);

    request = $.ajax({
        url: "ajax.php?req=$request_name",
        type: "post",
        data: serializedData,
        dataType: "html"
    });

    request.done(function (response){
        $done_content
    });

    request.fail(function (jqXHR, textStatus, errorThrown){
        console.error(
            "Ajax $request_name request failed. The following error occurred: "+
            textStatus, errorThrown
        );
    });

    request.always(function () {
        inputs.prop("disabled", false);
    });

});

HTML;
    }

Thas不起作用。是否可以按原样传递指令并使其工作或必须处于功能中？如果必须在函数中，那么正确的方法是什么？使用eval（）可能是可行的，但似乎非常气馁，我现在还没有尝试过

编辑：我试图更好地解释：我试图做的是让php或js函数调用并作为参数传递唯一需要更改的内容，例如，在我将在项目中执行的数百个类似表单上，可以避免数千或上万行重复代码，并且可能的重构或未来的改进更简单、更快。我从php的一代开始，例如：

// <script> inside of the page generate by php (and in some cases in html received by other ajax request)
$('#f_man-marker_edit-marker').on('submit', function(e){
    TM.editMarker(e, $(this), 'man-marker_edit-marker');
});

...
// in other js file
TM.editMarker = function (e, form, ajax_request) {
    // stop browser from submitting form!
    e.preventDefault();

    // Abort any pending request
    if (request) request.abort();

    // Let's select and cache all the fields
    let inputs = form.find("input, select, button, textarea");

    // Serialize the data in the form
    let serializedData = form.serialize();

    // Let's disable the inputs for the duration of the Ajax request.
    // Note: we disable elements AFTER the form data has been serialized.
    // Disabled form elements will not be serialized.
    inputs.prop("disabled", true);

    request = $.ajax({
        url: "ajax.php?req=" + ajax_request,
        type: "post",
        data: serializedData,
        dataType: "html"
    });

    request.done(function (response) {
        $("#ajaxoutput2").empty().append(response);
        $("#ResultModal2").modal("show");
    });

    request.fail(function (jqXHR, textStatus, errorThrown) {
        console.error(
            "Ajax " + ajax_request + " request failed. The following error occurred: " +
            textStatus, errorThrown
        );
    });

    request.always(function () {
        inputs.prop("disabled", false);
    });

};

...
// "f_man-marker_add-marker" is the id of the form, "man-marker_add-marker" is the id of the ajax request, $man_marker_jap1 contain that instructions printed inside of request.done function (they can be different on any form)

TM\UI\JSHelper::jqueryAjaxPost(
            "f_man-marker_add-marker", "man-marker_add-marker", $man_marker_jap1);

.....
// in the file of TM\UI\JSHelper:

...
/**
     * Generate a jquery ajax of type post and datatype html
     * will call the url ajax.php?req=$request_name
     * and request.done will do what define in $done_content
     *
     * @param string $form_id Id of the form
     * @param string $request_name Name of the ajax request parameter
     * @param string $done_content Content of request.done
     */
    public static function jqueryAjaxPost(string $form_id, string $request_name, string $done_content){
        echo <<<HTML

$("#$form_id").submit(function(event){

    // Prevent default posting of form - put here to work in case of errors
    event.preventDefault();

    // Abort any pending request
    if (request) { request.abort(); }

    let form = $(this);

    // Let's select and cache all the fields
    let inputs = form.find("input, select, button, textarea");

    // Serialize the data in the form
    let serializedData = form.serialize();

    // Let's disable the inputs for the duration of the Ajax request.
    // Note: we disable elements AFTER the form data has been serialized.
    // Disabled form elements will not be serialized.
    inputs.prop("disabled", true);

    request = $.ajax({
        url: "ajax.php?req=$request_name",
        type: "post",
        data: serializedData,
        dataType: "html"
    });

    request.done(function (response){
        $done_content
    });

    request.fail(function (jqXHR, textStatus, errorThrown){
        console.error(
            "Ajax $request_name request failed. The following error occurred: "+
            textStatus, errorThrown
        );
    });

    request.always(function () {
        inputs.prop("disabled", false);
    });

});

HTML;
    }

不要给出错误或警告，除非

$('#link_open-marker' + parArray[id]).remove();

所以我想我对parArray做了些错事，但我不明白，有人能帮我解决什么问题吗（或者用另一种方式解决这个问题，如果不好的话）

谢谢你的回复，很抱歉我的英语不好。

我不太确定我是否理解了你的问题，但是如果是关于在你的方法之外完成回调，你有两种可能的方法

使用闭包：

TM.editMarker = function (e, form, ajax_request, doneHandler) {
   ...

   request.done(function (response) {
        $("#ajaxoutput2").empty().append(response);
        $("#ResultModal2").modal("show");

        if(doneHandler !== undefined)
             doneHandler();
    });
}

TM.editMarker(e, $(this), 'man-marker_edit-marker', function() {
   console.log("done");
});

TM.editMarker = function (e, form, ajax_request) {
   ...

   var prom= jQuery.Deferred();
   request.done(function (response) {
        $("#ajaxoutput2").empty().append(response);
        $("#ResultModal2").modal("show");

        prom.resolve();
    });

    return prom.promise();
}

TM.editMarker(e, $(this), 'man-marker_edit-marker').then(function() {
   console.log("done");
});

使用承诺：

TM.editMarker = function (e, form, ajax_request, doneHandler) {
   ...

   request.done(function (response) {
        $("#ajaxoutput2").empty().append(response);
        $("#ResultModal2").modal("show");

        if(doneHandler !== undefined)
             doneHandler();
    });
}

TM.editMarker(e, $(this), 'man-marker_edit-marker', function() {
   console.log("done");
});

TM.editMarker = function (e, form, ajax_request) {
   ...

   var prom= jQuery.Deferred();
   request.done(function (response) {
        $("#ajaxoutput2").empty().append(response);
        $("#ResultModal2").modal("show");

        prom.resolve();
    });

    return prom.promise();
}

TM.editMarker(e, $(this), 'man-marker_edit-marker').then(function() {
   console.log("done");
});

编辑时回答：

TM.editMarker = function (e, form, ajax_request, doneHandler) {
   ...

   request.done(function (response) {
        $("#ajaxoutput2").empty().append(response);
        $("#ResultModal2").modal("show");

        if(doneHandler !== undefined)
             doneHandler();
    });
}

TM.editMarker(e, $(this), 'man-marker_edit-marker', function() {
   console.log("done");
});

TM.editMarker = function (e, form, ajax_request) {
   ...

   var prom= jQuery.Deferred();
   request.done(function (response) {
        $("#ajaxoutput2").empty().append(response);
        $("#ResultModal2").modal("show");

        prom.resolve();
    });

    return prom.promise();
}

TM.editMarker(e, $(this), 'man-marker_edit-marker').then(function() {
   console.log("done");
});

好的，那么您要做的就是通过ajax响应执行javascript函数。您可以通过这样做来实现这一点：

$.ajax({
    url: "somejs.js",
    context: document.body,
    success: function(responseText) {
        eval(responseText);
    }
});

然而，这实际上是肮脏的，不是好的做法，因为javascript通常是UI操作命令。将UI内容保留在前端，只从后端返回原始数据/json。你能给我一个例子说明这个响应是什么样子的吗？然后我可以给你一个例子说明我将如何解决这个问题。

你传递给

TM.editMarker

的所有内容都可以在

request.done

函数中找到。你这里有一个语法错误：

函数（e，form，ajax\u request，req\u done（））

应该是

函数（e，form，ajax\u request，req\u done）

@slebetman感谢您的回复，您报告的错误是在找到有效解决方案之前所做的荒谬尝试之一（见上文），但我不知道它是否好，也许我解释得不好，我编辑了我的文章，试图解释得更好。我编辑了另一次，包括我以前用php做的事情，这是可行的，但似乎不是做这件事的好方法。