jQuery接受多个输入没有响应

时间：2018-08-09 08:57:03

标签： javascript jquery html ajax

我正在尝试使我的系统接受多个是/否问题，但是，当我尝试提交时，控制台中出现一个我不确定的错误，并且查询未返回任何内容。我以前在序列化数据时使用了Array，但现在需要使用Array List，我没有使用jQuery太多，并且仍然不确定我在做什么错。答案和解释深表感谢。我认为我无法正确传递值，但不确定如何传递。

更新** 我将“需要电子邮件地址”规则之一放回了最初的处理方式，并接受了它。它还在新框中显示了此决定。如果我选择“不需要电子邮件”，则电子邮件地址中“否”的复选框显示得很清楚，表明它已从数据库中正确读取，只是不向其发送任何内容。另外，当我尝试使用此方法输入规则时，它会禁用表单元素，然后什么也不做。

当前的JavaScript 

    window.onunload = refreshParent;
    function refreshParent() {
        window.opener.location.reload();
    }

$body = $("body");

$(document).on({
    ajaxStart: function() { $body.addClass("loading");    },
    ajaxStop: function() { $body.removeClass("loading"); } 
});

$(document).ready(function() {
// Variable to hold request
var request;

$(".chosen-select").chosen({width: '300px'});

//$("#distance_slider").slider({});

// Bind to the submit event of our form
$("#additional_criteria").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();
    }
    // setup some local variables
    var $form = $(this);

    //$("#isajax").val("1");    

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

    // Serialize the data in the form
    var serializedData = $form.serializeArray();

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

        // Fire off each request to /form.php
        for(let oneObject of serializedData){
    $.post({
            url: "index.php?module=Prospects&action=PopupContactsCriteria&html=Popup_Contacts_Criteria_picker&form=ContactsForm&record={RECORD_VALUE}&first_run=1&form_submit=true&query=true&sugar_body_only=1",
            data: oneObject
        })
    }



    // Callback handler that will be called on success
    request.done(function (response, textStatus, jqXHR){
        // Log a message to the console
        //console.log("Hooray, it worked!");
        //console.log(response);
        document.open();
        document.write(response);
        document.close();
    });

    // Callback handler that will be called on failure
    request.fail(function (jqXHR, textStatus, errorThrown){
        // Log the error to the console
        console.error(
            "The following error occurred: "+
            textStatus, errorThrown
        );
    });

    // Callback handler that will be called regardless
    // if the request failed or succeeded
    request.always(function () {
        // Reenable the inputs
        $inputs.prop("disabled", false);
    });

});

当前用于将数据发送到Jquery的HTML 

<button onclick="myFunction()">Show Additional Rules (*Not Required)</button>

<div id="myDIV" hidden="true">
    <table cellpadding="0" cellspacing="0" border="0" width="100%" class="edit view">
        <tr>
        <td>
            <form id="additional_criteria" name="additional_criteria">

                <table width="100%" border="0" name="additional_criteria">
                    <tr>
                        <td><p><Strong> Additional Rules</strong><p/></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td width="50%">Email Address Required?  </td><td class="dataLabel" name="email" id="email" > Yes <input type="radio" name="email_c" value="true_ex" {EMAIL_TEX_CHECKED}>  No <input type="radio" name="email_c" value="false" {EMAIL_F_CHECKED}></td>
                    </tr>
                    <tr>
                        <td>Do they need to have an account?</td><td class="dataLabel" name="account" id="account" >  Yes  <input type="radio" name="account_c" value="True" {ACCOUNT_T_CHECKED}>  No  <input type="radio" name="account_c" value="False" {ACCOUNT_F_CHECKED}></td>
                    </tr>
                    <tr>
                        <td>Are they subscribed to AWC Newsletter? </td><td class="dataLabel" name="awc" id="awc" >  Yes <input type="radio" name="awc_c" value="True"> No <input type="radio" name="awc_c" value="False"></td>
                    </tr>
                    <tr>
                        <td> Do they need to have a mobile?</td><td class="dataLabel" name="mobile" id="mobile"  >   Yes  <input type="radio" name="mobile_c" value="True" {MOBILE_T_CHECKED}>  No <input type="radio" name="mobile_c" value="False" {MOBILE_F_CHECKED}></td>
                    </tr>



                    <tr>
                        <td align="right" name="buttonForm" id="buttonForm">
                            <input type="hidden" name="action" value="PopupContactsCriteria"/>
                            <input type="hidden" name="query" value="true"/>
                            <input type="hidden" name="record" value="{RECORD_VALUE}"/>
                            <input type="hidden" name="module" value="{MODULE_NAME}" />
                            <input type="hidden" name="form_submit" value="{FORM_SUBMIT}" />
                            <input type="hidden" name="sugar_body_only" value="1" />
                            <input type="hidden" name="form" value="{FORM}" />          
                            <input class="button" type="submit" name="addAdditionalButton" id="addAdditionalButton" value="  Add Additional  " />
                        </td>   
                </tr>
                </table>
            </form>
        </td>
        </td>
    </table>
</div>

控制台错误

index.php?module=Prospects&action=PopupContactsCriteria&html=Popup_Contacts_Criteria_picker&form=ContactsForm&record=a4e26920-e375-42f8-0168-5b63421aa7c7&form_submit=true&query=true&sugar_body_only=1&delete=exclude_awc:237 Uncaught TypeError: Cannot read property 'done' of undefined
    at HTMLFormElement.<anonymous> (index.php?module=Prospects&action=PopupContactsCriteria&html=Popup_Contacts_Criteria_picker&form=ContactsForm&record=a4e26920-e375-42f8-0168-5b63421aa7c7&form_submit=true&query=true&sugar_body_only=1&delete=exclude_awc:237)
    at HTMLFormElement.dispatch (jquery.min.js:3)
    at HTMLFormElement.v.handle (jquery.min.js:3)
(anonymous) @ index.php?module=Prospects&action=PopupContactsCriteria&html=Popup_Contacts_Criteria_picker&form=ContactsForm&record=a4e26920-e375-42f8-0168-5b63421aa7c7&form_submit=true&query=true&sugar_body_only=1&delete=exclude_awc:237
dispatch @ jquery.min.js:3
v.handle @ jquery.min.js:3
8jquery.min.js:5 POST http://217.156.214.229/crm/[object%20Object] 404 (Not Found)
send @ jquery.min.js:5
ajax @ jquery.min.js:5
b.(anonymous function) @ jquery.min.js:5
(anonymous) @ index.php?module=Prospects&action=PopupContactsCriteria&html=Popup_Contacts_Criteria_picker&form=ContactsForm&record=a4e26920-e375-42f8-0168-5b63421aa7c7&form_submit=true&query=true&sugar_body_only=1&delete=exclude_awc:228
dispatch @ jquery.min.js:3
v.handle @ jquery.min.js:3

1 个答案:

答案 0 :(得分：0)

错误是因为您正在使用request 声明 var request;，但是您没有分配任何东西。尚未为其提供值，因此为undefined。未定义的事物没有可以调用的函数。

我假设您希望它处理对AJAX请求的响应...但是它将附加到您的多个潜在$.post请求中？如果您只写request = $.post...并将所有结果分配给同一个变量，它将继续覆盖它们，并可能只留下对最后一次调用的响应，但是与此同时，由于AJAX请求，事情可能会变得很棘手。是异步的。不太可能，但可能。无论哪种方式，它都是无望的，因为大概您希望对所有电话都做出回应。

因此...由于您的代码将生成多个请求，因此只有一个名为request的变量并将响应处理程序附加到该变量是没有意义的，因为它无法处理所有潜在的请求-而是您只需将处理程序直接附加到对$ .post（）的每次调用即可。

在代码中的任何地方删除对request的所有引用，然后将后一部分更改为：

for(let oneObject of serializedData){
    $.post({
        url: "index.php?module=Prospects&action=PopupContactsCriteria&html=Popup_Contacts_Criteria_picker&form=ContactsForm&record={RECORD_VALUE}&first_run=1&form_submit=true&query=true&sugar_body_only=1",
        data: oneObject
    }).done(function (response, textStatus, jqXHR){
        // Log a message to the console
        //console.log("Hooray, it worked!");
        //console.log(response);
        document.open();
        document.write(response);
        document.close();
    }).fail(function (jqXHR, textStatus, errorThrown){
        // Log the error to the console
        console.error("The following error occurred: " + textStatus, errorThrown);
    }).always(function () {
        // Reenable the inputs
        $inputs.prop("disabled", false);
    });
}

您可能需要对其进行进一步调整，以使其按照您想要的方式精确运行（例如，一次仅重新启用一个输入），但这是您可以采用的一般方法。

相关问题
最新问题