个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我有一个带有表单的页面，该页面应该使用 AJAX 将数据保存和加载到文件中。
这是我正在使用的java脚本:
$(document).ready(function(){
$("#saveConfigForm").submit(function (e)
{
e.preventDefault();
var formData = $(this).serialize();
alert(formData);
});
$(".configFile").click(function() {
if (this.text == '' && this.text == 'undefined')
{
return;
}
$.get( "showForm.php", { loadConfig: this.text} )
.done(function( data ) {
$('#configFormContainer').html(data);
});
});
第二个函数中的 .configFile 类引用 a-Tags 列表。当我单击其中一个时，脚本成功从文件加载内容并显示它。这是上述 a-标签的 html:
<div class="list-group">
<a href="#" class="configFile>config.json</a>
<a href="#" class="configFile>config_1504987517.json</a>
</div>
这部分工作正常:javascript 函数被触发。在 showForm.php 中加载配置文件。它正在使用文件中的内容重建完整的表单。
真正不起作用的是提交功能上的触发器。这是表单-html
<form id="saveConfigForm" method="POST">
<a bunch of form elements />
<button name="submit" class="btn btn-success" type="submit" id="saveConfig">Speichern</button>
</form>
那么，现在发生了什么:
当我最初加载页面时，我单击提交按钮并收到警报。此触发器 .submit() 正在工作。
当我单击其中一个 a 标签来加载配置文件时，会加载该文件而无需刷新页面。这个触发器 .click() 也可以工作。
之后:当我单击提交按钮时，页面将被重新加载。触发器 .submit() 不起作用。
在页面“不需要的”重新加载之后，.submit()-trigger 再次工作。
我不知道这里出了什么问题。希望有人能帮忙
干杯
最佳答案
虽然这不是您的全部代码集，但我还是采用了您发布的内容并制作了一个页面。我可以单击任意一个 .configFile 链接，然后单击提交按钮，我就会收到警报。
但是我确实用 " 关闭了 .configFile 元素的两个 class 属性。我不知道这是否有区别。但是，如果不是，那么它是在 ajax 请求之后发生的事情，当然我无法用这段代码模拟。
<html>
<body>
<div class="list-group">
<a href="#" class="configFile">config.json</a> <!-- //added " to end of class attribute -->
<a href="#" class="configFile">config_1504987517.json</a> <!--//added " to end of class attribute -->
</div>
<form id="saveConfigForm" method="POST">
<a bunch of form elements />
<button name="submit" class="btn btn-success" type="submit" id="saveConfig">Speichern</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#saveConfigForm").submit(function (e)
{
e.preventDefault();
var formData = $(this).serialize();
alert(formData);
});
$(".configFile").click(function() {
if (this.text == '' && this.text == 'undefined')
{
return;
}
if (window.XMLHttpRequest)
{
// AJAX for IE7+, Chrome, Firefox, Safari, Opera
xmlhttp = new XMLHttpRequest();
} else {
// AJAX for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
$('#configFormContainer').html(xmlhttp.responseText);
}
}
xmlhttp.open("GET","showForm.php?loadConfig=" + this.text, true);
xmlhttp.send();
});
});
</script>
</body>
</html>
我好奇的另一件事是:打开浏览器的开发者控制台并再次粘贴到您的提交 Binder 中:
$("#saveConfigForm").submit(function (e)
{
e.preventDefault();
var formData = $(this).serialize();
alert(formData);
});
如果您的提交在此之后有效，我建议您在呈现新的 html 后再次绑定(bind)点击事件。或者，将事件绑定(bind)到 $(document)，例如:
$(document).on('submit', '#saveConfigForm', (e) => {
e.preventDefault();
var formData = $(this).serialize();
alert(formData);
});
最后一点，我不会尝试增加您的代码以帮助解决您遇到的特定问题。正如另一位用户评论的那样，由于您使用的是 jQuery，所以使用 jQuery 函数会更干净。但我不认为这是你问题的一部分。
关于javascript - Jquery 和 Ajax - 在 ajax 请求后无法触发表单提交，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46135119/
25
4
0
我正在尝试从该网站抓取历史天气数据: http://www.hko.gov.hk/cis/dailyExtract_uc.htm?y=2016&m=1 在阅读了 AJAX 调用后，我发现请求数据的正确
我有两个 postman 请求 x,y，它们命中了两个不同的休息 api X,Y 中的端点。 x 会给我一个身份验证 token ，这是发出 y 请求所必需的。如何在请求 y 中发出请求 x ？也就是
我使用请求库通过 API 与其他服务器进行通信。但现在我需要同时发送多个(10 个或更多)POST 请求，并且只有在所有响应都正确的情况下才能进一步前进。通常语法看起来有点像这样: var optio
背景:当用户单击按钮时，其类会在class1和class2之间切换，并且此数据是通过 AJAX 提交。为了确认此数据已保存，服务器使用 js 进行响应(更新按钮 HTML)。 问题:如果用户点击按钮的
我正在将 Node.js 中的请求库用于 Google 的文本转语音 API。我想打印出正在发送的请求，如 python example . 这是我的代码: const request = requi
我经常使用requests。最近我发现还有一个 requests2 和即将到来的 requests3 虽然有一个 page其中简要提到了 requests3 中的内容，我一直无法确定 requests
我正在尝试将图像发送到我的 API，然后从中获取结果。例如，我使用发送一个 bmp 图像文件 file = {"img": open("img.bmp)} r = requests.post(url,
我发现 Google Cloud 确保移出其物理环境的任何请求都经过强制加密，请参阅(虚拟机到虚拟机标题下的第 6 页)this link Azure(和 AWS)是否遵循类似的程序？如果有人能给我指
我有一个 ASP.NET MVC 应用程序，我正在尝试在 javascript 函数中使用 jQuery 来创建一系列操作。该函数由三部分组成。 我想做的是:如果满足某些条件，那么我想执行同步 jQu
我找不到如何执行 get http 请求，所以我希望你们能帮助我。 这个想法是从外部url(例如 https://api.twitter.com/1.1/search/tweets.json?q=tw
我的应用只需要使用“READ_SMS”权限。我的问题是，在 Android 6.0 上，当我需要使用新的权限系统时，它会要求用户“发送和查看短信”。 这是我的代码: ActivityCompat.re
我的前端代码: { this.searchInput = input; }}/> 搜索 // search method: const baseUrl = 'http://localho
我有一个由 AJAX 和 C# 应用程序使用的 WCF 服务， 我需要通过 HTTP 请求 header 发送一个参数。 在我的 AJAX 上，我添加了以下内容并且它有效: $.ajax({
我正在尝试了解如何使用 promises 编写代码。请检查我的代码。这样对吗？ Node.js + 请求: request(url, function (error, response, body)
如果失败(除 HTTP 200 之外的任何响应代码)，我需要重试发送 GWT RPC 请求。原因很复杂，所以我不会详细说明。到目前为止，我在同一个地方处理所有请求响应，如下所示: // We
当用户单击提交按钮时，我希望提交表单。然而，就在这种情况发生之前，我希望弹出一个窗口并让他们填写一些数据。一旦他们执行此操作并关闭该子窗口，我希望发出 POST 请求。 这可能吗？如果可能的话如何？我
像 Facebook 这样的网站使用“延迟”加载 js。当你必须考虑到我有一台服务器，流量很大时。 我很感兴趣 - 哪一个更好？ 当我一次执行更多 HTTP 请求时 - 页面加载速度较慢(由于限制(一
Servlet 容器是否创建 ServletRequest 和 Response 对象或 Http 对象？如果是ServletRequest，谁在调用服务方法之前将其转换为HttpServletReq
这是维基百科文章的摘录: In contrast to the GET request method where only a URL and headers are sent to the serv
我有一个循环，每次循环时都会发出 HTTP post 请求。 for(let i = 1; i console.log("succes at " + i), error => con
我是一名优秀的程序员,十分优秀！