在没有 iframe 的情况下使用 JavaScript 提交表单/获取 HTML？

Question

背景： 我从事学生工作，在 web 应用程序中转录纸质报告。它很旧，很遗憾我们无法更改源，也无法直接运行数据库查询。

它只会在您提交整个表单后检查唯一 ID 是否存在，除非填满，否则无法提交。不用说，这是在浪费大量时间，因为您经常转录整个内容后才意识到它是重复的。

目标： 我在下面创建了用户脚本，它启动了对唯一 ID 输入（noReferenceDeclarant）的 onblur 的搜索，检查是否有任何匹配项（行）并相应地返回。与 Greasemonkey 一起运行。搜索表单位于同一域的另一个页面中。搜索表单不接受任何 URL 参数。

这可以在不使用 iframe 的情况下完成吗（也许是 AJAX？） 这是我自己的生产力和同时学习 JS 的工具。由于我仍然是一个初学者，因此欢迎任何使代码更清晰的提示。

//Adding function to input's blur event
$(document).on ("blur", "#noReferenceDeclarant", isRefNumberExists);

//Vars
var noReferenceDeclarant = '';
var loadCode = 0;
var $searchForm;

//Fonctions
function isRefNumberExists () 
{
    noReferenceDeclarant = $('#noReferenceDeclarant').val();
    loadCode = 0;

    //Make sure there's data in the input before proceeding
    if (noReferenceDeclarant)
    {
            //Build search iframe
            $searchForm = $('<iframe />', {
                name: 'searchWindow',
                src: 'rechercherGriIntranet.do?methode=presenterRechercher',
                id:   'searchWindow',
                width: 0,
                height: 0           
            }).appendTo('body');

            $searchForm.load(searchRefNumber);
    }   
}

function searchRefNumber()
{
    var isExists = false;

    //Check which "load" it is to avoid submit loops
    if (loadCode === 0)
    {
        loadCode = 1;

        //Filling search form with search term
        $(this.contentDocument).find('#noReference').val(noReferenceDeclarant);

        //Set search form preferences
        $(this.contentDocument).find('#typeRapportAss').prop('checked', false);
        $(this.contentDocument).find('#typeRapportAS').prop('checked', false);
        $(this.contentDocument).find('#typeRapportSI').prop('checked', true);
        //Submit the form
        $(this.contentDocument).find('form:first').submit();
    }
    else if (loadCode === 1)
    {
        loadCode = 2;

        //See if there are any tr in the result table. If there are no results, there a thead but no tr.
        var foundReports = $(this.contentDocument).find('.resultatRecherche tr').length;

        if (foundReports > 0)
        {
            if (confirm('A report matching this ID already exists. Do you want to display it?'))
            {
                //Modal window loading the report in an iframe. Not done yet but that's fairly straightforward.
            }
            else
            {
                //Close and return to the form.
            }
        }

    }

    //Reset variables/clean ressources
    delete $searchForm;
    $('#dateRedactionRapport').focus();

}

Answer 1

总的来说，我见过更糟糕的代码。

Ajax 可以 做到这一点，但是您只需将 AJAX 响应放入 DOM（最有可能作为 iframe）。

在这种情况下，我会保留您的方法。我认为这是最理智的。j

如果没有完整的上下文，可能有一种方法可以清理 loadCode —— 但你所拥有的几乎相同并且有效。很多人会称之为semaphore，但这只是术语问题。

我真正要清理的唯一一件事是建议不要经常调用 jQuery 对象..

// Many folks recommend that jQuery  variables be named $<something>
var $doc = $(this.contentDocument);


doc.find('#typeRapportAss').prop('checked', false);
$doc.find('#typeRapportAS').prop('checked', false);
$doc.find('#typeRapportSI').prop('checked', true);

如果你想使用 jQuery 数据结构，你可以创建一个如下所示的 'config' 对象：

var formValues = {
    typeRapportAs: false,
    typeRapportAS: false,
    typeRapportSI: true
};

然后将其迭代到（使用for ... in 和.hasOwnProperty）。

这个项目不需要，你正在做的很好，但它可能是一个学习练习。