0

我有一个带有添加用户按钮的用户页面。当用户单击添加用户按钮时load()，会调用一个 Ajax 函数，该函数会adduserform在 firefox 中加载一个当 IE 时起作用。

但是，当在 chrome 中加载 jQuery 对话框时不会出现错误，但不会加载表单标签。

jsFiddle 与前面

<form id="adduser">
    <select id="ptsiid" name="ptsiid" onchange="secondarySiteDisplay();">
        <option value=""></option>
        <option value="1666">London</option>
        <option value="1544">NYC</option>
    </select>First Name:
    <input type="text" name="firstname" value="" size="15" maxlength="60">Last Name:
    <input type="text" name="lastname" value="" size="15" maxlength="60">Job Title:
    <input type="text" name="jobtitle" value="" size="20" maxlength="40">E-mail:
    <input type="text" name="email" value="" size="40" maxlength="128">Can Login?
    <td class="data" align="left">
        <input type="checkbox" name="canlogin">
    </td>Is Deleted?
    <td class="data" align="left">
        <input type="checkbox" name="isdeleted">
    </td>Change Password?
    <td class="data" align="left">
        <input type="checkbox" name="changepassword">
    </td>
    <input class="button" type="button" value="Update" onclick="doAjaxSubmit();" accesskey="">
</form>
4

2 回答 2

3

你的问题在这一行

jQuery('#popup').load("form.html", showDialog);

Chrome 强制执行相同的来源策略，这意味着您的请求将不会被加载，因为它与页面中的其他元素具有不同的来源。

jQuery 的 load 方法的文档也提到了这一点。

您可以在此处和此处找到关于什么是域的更好描述。这一段，从前一个链接中引用，在我看来描述得很好。

跨站点 HTTP 请求是对来自与发出请求的资源域不同的域的资源的 HTTP 请求。例如，从域 A ( http://domaina.example ) 加载的资源（例如 HTML 网页）使用域 B ( http://domainb.foo ) 请求资源，例如图像，使用img 元素（http://domainb.foo/image.jpg）。这在当今的 Web 上非常普遍——页面以跨站点方式加载大量资源，包括 CSS 样式表、图像和脚本以及其他资源。

截至今天（2013 年 8 月），这是 Chrome 中的一个未解决问题。

最后，这就是为什么您的代码在 chrome 中不起作用的原因。

编辑：

这是 Chrome 的解决方法。只要您不尝试使用 file:// 模式加载本地文件，它就可以工作。

编辑，第二部分：

我不确切知道您要做什么，但是由于 form.html 仅包含一个表单，因此您可以将其放在首页中。这样您就不必加载外部 html。它改变了你做事的方式（它不加载外部页面），但它在 chrome 中工作。我还在 IE、Safari 和 Opera 中对其进行了测试。因此，无论您决定使用哪种浏览器，它都应该可以正常工作。

这是一个工作代码的小提琴。

编辑，第三部分：

我认真建议您坚持上述方法，但是...

...如果您确实需要将内容放在外部页面中，并且您使用的是 php 或 .NET 之类的东西，则无法使用 ajax 从服务器获取页面并将它们发布到您的 div 中。它有点复杂。基本上，您需要在服务器端代码中有一个方法，将网页作为部分视图提供服务。在 .NET 中，您会编写类似这样的内容。

public PartialViewResult getForm()
{
   return PartialView("form.html");
}

我不熟悉 PHP，但代码应该是类似的。您还需要一个 javascript 函数来获取内容并将其放置在包含的 div 中：

function loadFrame()
{
    $.ajax({
    url: "@Url.Action("getForm","Form")",
    async: false
    }).done(function( data) {
    $("#popup").append(data);
    // we don't want to show the frame until the user has clicked on the button.
    // so we make it invisible.
    $("#popup").css("display","none"); 
    });
}
于 2013-08-06T02:31:18.110 回答
2

以下是您的 JSFiddle 中缺少的内容。

1) 你错过了添加jQuery库。

2) 也错过了添加jQuery UI。

3）由于您已将代码包装在 中load，

function addeditUser() {
  jQuery('#popup').load("form.html", showDialog);  
  alert(jQuery('#popup').text());
}

这行不通。

而是像这样使用

addeditUser = function () {
  jQuery('#popup').load("form.html", showDialog);  
  alert(jQuery('#popup').text());
}

或者

把它包起来head

检查JSFiddle

于 2013-08-05T08:24:03.803 回答