Tag: 单页面应用程序

简单的登录系统spa / php / mysql / jquery

我正在尝试创建一个简单的登录系统 – 我已经得到了我的用户能够登录并查看他的个人资料页面。 我正在尝试使链接在login_success.php模板中工作…现在它只是将“＃”附加到URL（因为我使用它作为占位符。 这是我的代码： JS / application.js中 $(document).ready(function() { $(“#main”).load(“templates/indexforms.php”, function () { $(“#login”).submit(function(e) { e.preventDefault(); $.post(“checklogin.php”, $(this).serialize(), function() { $(“#main”).load(“templates/login_success.php”); $(“#login”).remove(); $(“#register”).remove(); }); }); $(“#register”).submit(function(e) { e.preventDefault(); $.post(“checkreglogin.php”, $(this).serialize(), function(){ $(“#main”).load(“templates/login_success.php”); $(“#login”).remove(); $(“#register”).remove(); }); }); }); $(“#loginlinkdiv a”).click(function(event) { event.preventDefault(); $(“#main”).empty(); $(“#main”).load(“templates/logout.php”); }); $(“#logoutlinkdiv a”).click(function(event) { event.preventDefault(); $(“#main”).empty(); $(“#main”).load(“templates/indexforms.php”); }); }); 模板/ login_success.php […]

当我使用动态html两次applyBindings时，Knockout会变得疯狂

我正在创建一个带有淘汰赛的单页应用程序… 我有一个GlobalViewModel来管理所有动态页面（我通过ajax获取html）。 这是我的问题的一个例子： http://jsfiddle.net/zWtrr/7/ 当我加载相同模板2次（在“显示模板”中单击2次）时，敲门声变得疯狂并重复数据…如果检查可观察数组，则没有重复数据。 HTML： show template 脚本： function GlobalViewModel(){ var self = this; self.templateHtml = ko.observable(); self.templateVM = ko.observable(); self.showView = function(){ //i get this html from ajax var pageHtml = “”+ “All” + “Names” + “LastNames” + “NickNames” + “” + ” ” + “” + “”; self.templateHtml(pageHtml) self.templateVM(new ViewModel()) ko.cleanNode(document.getElementById(“template”)) ko.applyBindings(window.gvm, […]

将jQuery与AngularJS结合使用？

我正在为我的公司开发一个单页面框架。 我们构建了许多站点，并且我们快速构建它们，因此我们仍然非常依赖多页面服务器端模板。 这意味着前端开发人员几乎只需要处理CSS和jQuery来进行一些基本的DOM操作。 对于我们目前的工作来说，这是一个很棒的系统，但是进入基于JS的单页网站的未来，新项目资源（特别是前端开发人员）需要很多时间才能加快速度。 目前，我们所有的单页应用程序都依赖于jQuery和jQote2进行简单的页面转换（就像整个容器被简单地替换一样）。 同样，这很有效，因为我们的许多网站都很简单直接，但是当我们需要做任何自定义操作时它会变得一团糟，有时需要开发人员花几个小时来弄清楚如何进行简单的更改。 我一直在研究使用Angular来管理“页面”并处理基于服务器调用显示正确的模板。 一旦Angular向页面显示了正确的模板和页面，我希望前端开发人员能够使用jQuery来操作当前页面，类似于操作多页面网站的方式。 对我来说，Angular（与jQuery或jQM相比）的最大好处是in元素指令。 对于开发人员来说，启动网站是非常明确和容易的，快速查看DOM并了解它是如何被修改的。 本质上，我希望Angular充当控制器（并在必要时使用模型），然后向下浏览jQuery以进行交互。 是否可以以这种方式使用Angular和jQuery？ 对于这样一个简单的任务，角度总是过度杀伤吗？ （我知道我可以写一些自定义的东西，但Angular似乎只是踢了一下，并且有能力轻松扩展到我们更大的网站）

jQuery Mobile Autodivider无法正确格式化 – 使用热毛巾视图

我想让我的列表看起来像这样 ： 但它看起来像这样： 我直接从jQuery移动网站复制了代码 ： Adam Kinkaid Alex Wickerham Avery Johnson Bob Cabot Caleb Booth Christopher Adams Culver James 我的捆绑包有js和css文件： bundles.Add( new ScriptBundle(“~/scripts/vendor”) .Include(“~/scripts/jquery-{version}.js”) .Include(“~/scripts/jquery.mobile-{version}.js”) bundles.Add( new StyleBundle(“~/Content/css”) .Include(“~/Content/ie10mobile.css”) .Include(“~/Content/jquery.mobile-{version}.css”) .Include(“~/Content/jquery.mobile.structure-{version}.css”) .Include(“~/Content/jquery.mobile.theme-{version}.css”) 但是，我无法让我的列表看起来像它应该的那样。 我能错过什么？ 注意：在chrome中查看F12窗口时，我没有看到任何错误，但窗口右下方有一个小警告图标： 但是当我点击它时没有任何反应。 我也将相同的代码粘贴到jsfiddle.net中，它在那里工作得很好。 我只是无法让它在我的应用程序中工作。 编辑 – jQuery版本 编辑2 – 错误？ 我在开发人员工具中注意到了这一点 这可能与它有关吗？ 删除线是否意味着浏览器无法加载某些内容？ 编辑3 – 热毛巾结构导致问题？ 如果我在index.cshtml文件中放入相同的HTML，它就可以了。 但是当我尝试将它放在任何热毛巾视图（app文件夹，视图文件夹）中时，它只是不呈现。 也许有一些文件夹结构不允许找到css？ 编辑4 – […]

通过AJAX加载SPA网页

我正在尝试通过插入URL来使用JavaScript获取整个网页。 但是，该网站构建为单页应用程序（SPA），它使用JavaScript / backbone.js在呈现初始响应后动态加载其大部分内容。 例如，当我路由到以下地址时： https://connect.garmin.com/modern/activity/1915361012 然后将其输入控制台（页面加载后）： var $page = $(“html”) console.log(“%c✔: “, “color:green;”, $page.find(“.inline-edit-target.page-title-overflow”).text().trim()); console.log(“%c✔: “, “color:green;”, $page.find(“footer .details”).text().trim()); 然后我将获得动态加载的活动标题以及静态加载的页脚： 但是 ，当我尝试通过带有$.get()或.load()的AJAX调用加载网页时，我只会收到初始响应（与view-source时的内容相同）： view-source:https://connect.garmin.com/modern/activity/1915361012 因此，如果我使用以下任一AJAX调用： // jQuery.get() var url = “https://connect.garmin.com/modern/activity/1915361012”; jQuery.get(url,function(data) { var $page = $(“”).html(data) console.log(“%c✖: “, “color:red;”, $page.find(“.page-title”).text().trim()); console.log(“%c✔: “, “color:green;”, $page.find(“footer .details”).text().trim()); }); // jQuery.load() var url = “https://connect.garmin.com/modern/activity/1915361012”; var $page […]

什么是客户端MVC以及如何在JavaScript中实现？

最近经历了许多解释单页应用的文章。 但我对架构非常困惑，或者说它是如何工作的。 有一些新的称为客户端MVC通过使用javascript实现。 直到现在我已经看到了服务器端MVC架构。 这个客户端MVC是什么？ 客户端MVC文件在哪里托管。 它是否与类似于典型Web应用程序的服务器文件一起托管。 服务器端java脚本如node.js的作用是什么。 端到端的流量是多少？

错误：无法在’XMLHttpRequest’上执行’send’：无法加载’file’：AngularJS SPA

我是Angular SPA的新手，我第一次通过Googling获得代码并尝试运行。 但是我在Console中遇到了一些错误。 我无法弄清楚原因，我找到了以下控制台错误的列表： XMLHttpRequest无法加载file：/// C：/Users/hp/Downloads/single-page-app-angularjs-master/home.html。 交叉源请求仅支持协议方案：http，数据，chrome，chrome-extension，https，chrome-extension-resource。 错误：无法在’XMLHttpRequest’上执行’send’：无法加载’file：/// C：/Users/hp/Downloads/single-page-app-angularjs-master/home.html’。 XMLHttpRequest无法加载file：/// C：/Users/hp/Downloads/single-page-app-angularjs-master/about.html。 交叉源请求仅支持协议方案：http，数据，chrome，chrome-extension，https，chrome-extension-resource。 错误：[$ compile：tpload] http://errors.angularjs.org/1.3.3/ $ compile / tpload？p0 = home.html Single page web app using Angularjs Home(current) About us Read tutorial