代码之家 › 专栏 › 技术社区 › hjpotter92

通过ID过滤/缩短AJAX/获取html

urlfetch html-parsing jquery

hjpotter92 · 技术社区 · 13 年前

我目前正在使用markdown(而不是以前存储在数据库中的HTML内容)重写我的错误/faq消息。现在,我临时设置了一个页面 errors.php 其中一个文本区域显示了我必须编辑的内容,其中有两个小的错误代码和数字输入框。

目前,当我点击fetch按钮(见图1)时,它会按原样提取HTML并将其放入文本区域(见图2)。

相反,我想要类似的东西 $.load(<link> + " #content") 使用AJAX。这可能吗?

jQuery公司

$('#Fetch').on( 'click', function( e ) {
    e.preventDefault();
    var MyUrl = 'http://******/faq.php?code=' + $('input[name=code]').val() + "&num=" + $('input[name=number]').val();
    $.ajax( {
        url: MyUrl,
        type: "get",
        dataType: 'html',
        success: function( data ) {
            $('#MyArea').val(data);
        }
    });
});

上面的工作非常完美,只有一个缺陷。它将整个页面的HTML内容转储到文本区域内。我只想要(假设)来自 #content 在…上 faq.php 页使用臭名昭著的 regex 对于HTML,但我想要一个更干净的解决方案。

_图像1

_图像2

2 回复 | 直到 13 年前

Georgi-it 13 年前

好吧,所以我有一个想法,它不是最干净的,但我想它会奏效。

这就是您的代码:

$('#Fetch').on( 'click', function( e ) {
    e.preventDefault();
    var MyUrl = 'http://******/faq.php?code=' + $('input[name=code]').val() + "&num=" + $('input[name=number]').val();
    $.ajax( {
        url: MyUrl,
        type: "get",
        dataType: 'html',
        success: function( data ) {
            $('#MyArea').val(data);
        }
    });
});

我们可以改变成功并实现以下目标:创建 <div></div> 集装箱 display:none 样式,然后填充这个div,然后从中获取#content。所以它看起来像这样:

$('#Fetch').on( 'click', function( e ) {
    e.preventDefault();
    var MyUrl = 'http://******/faq.php?code=' + $('input[name=code]').val() + "&num=" + $('input[name=number]').val();
    $.ajax( {
        url: MyUrl,
        type: "get",
        dataType: 'html',
        success:  function (data) {
               $("body").append("<div id='contentContainer'></div>").css("display","none");
               $("#contentContainer").html(data);
               var content = $("#contentContainer #content").html();
               $("#MyArea").val(content);
                   }
    });

之后,您可以删除div,但您得到了要点。

编辑:

好吧,这里有一个更好的主意: 实际上,您需要将该信息解析为jQuery变量,然后您就可以像从DOM解析html一样解析它。

$('#Fetch').on( 'click', function( e ) {
    e.preventDefault();
    var MyUrl = 'http://******/faq.php?code=' + $('input[name=code]').val() + "&num=" + $('input[name=number]').val();
    $.ajax( {
        url: MyUrl,
        type: "get",
        dataType: 'html',
        success:  function (data) {
               var container = $(data);
               var content = $(container).find("#content").html();
               $("#MyArea").val(content);
                   }
    });

我想这不会有任何清洁剂了。此外,它将快速工作,因为我们只与DOM交互一次。

MarutiB 13 年前

您可以使用$(任意html)从中创建一个dom,然后在其中搜索“内容”容器。

例如,我们可以将您的功能更改为:-

$('#Fetch').on( 'click', function( e ) {
e.preventDefault();
var MyUrl = 'http://******/faq.php?code=' + $('input[name=code]').val() + "&num=" + $('input[name=number]').val();
$.ajax( {
    url: MyUrl,
    type: "get",
    dataType: 'html',
    success:  function (data) {
     var content = $("#content",$(data)).html();
     $("#MyArea").val(content);
        }
});