提交表单/使用JavaScript获取HTML而不使用iframe

Submitting form/getting HTML with JavaScript without iframe?

本文关键字:iframe HTML 获取 表单 使用 JavaScript 提交      更新时间:2023-09-26

上下文:我从事学生工作,在网络应用程序中转录论文报告。它很旧,不幸的是,我们无法更改源代码,也无法直接运行DB查询。

它只会在你提交整个表格后检查唯一ID是否存在,除非完全填写,否则你不能提交。不用说,这是一种巨大的时间浪费,因为你经常转录整件事,却发现它是重复的。

目标:我制作了下面的用户脚本,用于启动搜索-在唯一ID的输入(noReferenceDeclart)的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();
}

总的来说,我看到了更糟糕的代码。

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

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