ajax 相关问题

从使用 Ajax/Javascript 的网站收集数据。 - 卷曲

我正在尝试使用curl（通过PHP）抓取搜索表单。我认为一切都是正确的，或者接近正确的，但事实似乎并非如此。为了提供一些背景知识，我正在尝试收集（或

AJAX 补丁请求在 Laravel 控制器中返回空

我正在尝试更新 Laravel 中的资源，并向我的控制器发送 PATCH 请求。 这是我的 AJAX 调用 $.ajax('profile', { // 替换为您的实际端点 URL 类型：'补丁'， 他...

向ajax请求返回错误的最佳方式是怎样的？

当从ajax调用一个WebMethod时，如果我返回一个简单的字符串，ajax代码会毫无错误地转到成功方法，如下所示： [网络方法] [脚本方法（ResponseFormat = ResponseFo...

使用 jQuery AJAX 将 JSON 发布到 CFC

我正在尝试使用 Jquery/AJAX/JSON 和 CFC 来发送电子邮件（很简单吧？）在花了很多时间试图找到一个完整的示例来说明它应该如何工作之后，我已经接近了，但被卡住了于...

自定义事件上的 Htmx

我尝试使用 htmx 触发器和自定义事件，但没有成功。我使用自定义事件是因为我将在页面中触发多次刷新。我的来源很简单，但我无法使它...

浏览器的行为UTF-8页面带有额外字符，如U+FFFE（ajax错误）XML解析错误：格式不正确

我们正在使用 PrimeFaces 开发一些 JSF Web 应用程序。 可以在 inputText 中复制/粘贴带有非 UTF-8 字符（例如 ``（这是该字符））的文本并保存页面。但我...

从 samsclub.com 抓取产品详细信息 [已关闭]

我正在使用 PHP 从 SamsClub.com 抓取数据 $res = file_get_contents('http://www.samsclub.com/sams/bath-towel-apple-gr-100-cotton/prod10450797.ip'); 我已经使用 PHP 爆炸创建了函数...

VM2022：2 未捕获的语法错误：意外的令牌：在 AJAX 调用中

我从后端发送 GET 请求来获取 json 响应。我收到这个错误。 未捕获的语法错误：意外的标记： 在 DOMEval (jquery-3.3.1.js:111) 在 Function.glob...

如何使用 Axios 从表单发布文件

使用原始 HTML，当我使用以下命令将文件发布到 Flask 服务器时，我可以从 Flask 请求全局访问文件： 使用原始 HTML，当我使用以下命令将文件发布到 Flask 服务器时，我可以从全局 Flask 请求访问文件： <form id="uploadForm" action='upload_file' role="form" method="post" enctype=multipart/form-data> <input type="file" id="file" name="file"> <input type=submit value=Upload> </form> 在烧瓶中： def post(self): if 'file' in request.files: # .... 当我尝试对 Axios 执行相同操作时，烧瓶请求全局为空： <form id="uploadForm" enctype="multipart/form-data" v-on:change="uploadFile"> <input type="file" id="file" name="file"> </form> <script> function uploadFile(event) { const file = event.target.files[0] axios.post('upload_file', file, { headers: { 'Content-Type': 'multipart/form-data' } }) } </script> 如果我使用上面相同的 uploadFile 函数，但从 axios.post 方法中删除 headers json，我会在 Flask 请求对象的表单键中得到一个 csv 字符串值列表（文件是 .csv）。 如何获取通过 axios 发送的文件对象？ 将文件添加到 formData 对象，并将 Content-Type 标头设置为 multipart/form-data。 var formData = new FormData(); var imagefile = document.querySelector('#file'); formData.append("image", imagefile.files[0]); axios.post('upload_file', formData, { headers: { 'Content-Type': 'multipart/form-data' } }) 使用 Vue 的示例应用程序。需要在本地主机上运行的后端服务器来处理请求： var app = new Vue({ el: "#app", data: { file: '' }, methods: { submitFile() { let formData = new FormData(); formData.append('file', this.file); console.log('>> formData >> ', formData); // You should have a server side REST API axios.post('http://localhost:8080/restapi/fileupload', formData, { headers: { 'Content-Type': 'multipart/form-data' } } ).then(function () { console.log('SUCCESS!!'); }) .catch(function () { console.log('FAILURE!!'); }); }, handleFileUpload() { this.file = this.$refs.file.files[0]; console.log('>>>> 1st element in files array >>>> ', this.file); } } }); https://codepen.io/pmarimuthu/pen/MqqaOE 如果您不想使用 FormData 对象（例如，您的 API 采用特定的内容类型签名，而 multipart/formdata 不是其中之一），那么您可以这样做： uploadFile: function (event) { const file = event.target.files[0] axios.post('upload_file', file, { headers: { 'Content-Type': file.type } }) } 分享我使用 React 和 HTML 输入的经验 定义输入字段 <input type="file" onChange={onChange} accept ="image/*"/> 定义 onChange 监听器 const onChange = (e) => { let url = "https://<server-url>/api/upload"; let file = e.target.files[0]; uploadFile(url, file); }; const uploadFile = (url, file) => { let formData = new FormData(); formData.append("file", file); axios.post(url, formData, { headers: { "Content-Type": "multipart/form-data", }, }).then((response) => { fnSuccess(response); }).catch((error) => { fnFail(error); }); }; const fnSuccess = (response) => { //Add success handling }; const fnFail = (error) => { //Add failed handling }; 这对我有用，我希望对某人有帮助。 var frm = $('#frm'); let formData = new FormData(frm[0]); axios.post('your-url', formData) .then(res => { console.log({res}); }).catch(err => { console.error({err}); }); 这是我的方式： var formData = new FormData(formElement); // formData.append("image", imgFile.files[0]); const res = await axios.post( "link-handle", formData, { headers: { "Content-Type": "multipart/form-data", }, } ); 如何使用内存中的对象（如 JSON 对象）发布文件： import axios from 'axios'; import * as FormData from 'form-data' async function sendData(jsonData){ // const payload = JSON.stringify({ hello: 'world'}); const payload = JSON.stringify(jsonData); const bufferObject = Buffer.from(payload, 'utf-8'); const file = new FormData(); file.append('upload_file', bufferObject, "b.json"); const response = await axios.post( lovelyURL, file, headers: file.getHeaders() ).toPromise(); console.log(response?.data); } Axios 版本 0.25.0 > 到 0.27.2 存在问题，如果您有 FormData 多个字段，但对于包含文件的一个字段来说没问题，则无法正确处理 PUT 请求中的 appended 对象， POST 工作正常。 此外，Axios 0.25.0+ 会自动设置正确的标头，因此无需指定 Content-Type。 如果你要拍照，你必须存储图像并保留其路径，然后从其路径中检索机器上的 blob，将 blob 添加到 formData 中，还添加图像的名称，然后使用multipart/form-data 标头，我们在 req.files 的后面找到图像 对我来说，错误是控制器中的实际参数名称......我花了一段时间才弄清楚，也许它会对某人有所帮助。我正在使用 Next.js / .Net 6 客户： export const test = async (event: any) => { const token = useAuthStore.getState().token; console.log(event + 'the event') if (token) { const formData = new FormData(); formData.append("img", event); const res = await axios.post(baseUrl + '/products/uploadproductimage', formData, { headers: { 'Authorization': `bearer ${token}` } }) return res } return null } 服务器： [HttpPost("uploadproductimage")] public async Task<ActionResult> UploadProductImage([FromForm] IFormFile image) { return Ok(); } 这里出错，因为服务器需要参数“image”而不是“img：” formData.append("img", event); public async Task<ActionResult> UploadProductImage([FromForm] IFormFile image)

从 PHP 中的 HTML 中删除所有样式属性

我必须加载 HTML 页面的正文，没有任何样式属性，没有链接图像以及所有非“纯文本”的内容。我想用 PHP 来做，并尝试了非常好的解决方案，但我还没有...

Ajax 帖子被 Firefox 中止（在 Chrome 或 IE 中看不到）

使用 Firefox 时，我的 ajax post 请求在 Firebug 中被报告为已中止。 ajax post 在 IE 和 Chrome 中运行良好。 这不是跨域请求。 我尝试查看这个问题...

如何更改 Ajax 分页（页面列表）以加载更多？

如何将视频教程中的 Ajax 分页（页面列表）更改为“加载更多按钮” - 使用 October CMS 制作网站 - 第 43 部分 - Ajax 分页？ 你能告诉我该怎么做吗？

在codeigniter中使用fileuploader.js以及在ajax中使用csrf

如何在 Codeigniter 中通过 csrf、ajax 使用 fileuploader.js？ 我正在使用 images_crud 库 http://www.web-and-development.com/image-crud-an-automatic-multiple-image-uploader-for-codeignit...

Ajax 将字符串发布到控制器操作返回 404

在按键时我调用一个 JavaScript 函数，该函数应该调用控制器操作并返回结果，但我收到 404 错误。我在控制器活动的顶部有断点...

在 ASP.NET Core 中发布 jQuery 数据表会导致 400 错误

我在前端设置了一个 DataTables 表，并进行服务器端处理，因为它是一个大型数据集。我已按如下方式设置 Ajax 调用，以回发到同一应用程序中的 MVC 控制器。 一个...

初始 ajax 表单提交后引导下拉列表不起作用

我的页面上有一个下拉菜单，manager.php，在这里。 抱歉格式化 - bootstrap.： <p>我的页面上有一个下拉菜单，<pre><code>manager.php</code></pre>，在这里。 抱歉格式化 - bootstrap.:</p> <pre><code> &lt;!-- Bootstrap --&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js&#34;&gt;&lt;/script&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;../../css/bootstrapstyle.css&#34;&gt; &lt;!-- Bootstrap Dropdown Enhancements--&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;../../js/dropdowns-enhancement.js&#34;&gt;&lt;/script&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;../../css/dropdowns-enhancement.css&#34;&gt; &lt;div class=&#34;row&#34;&gt; &lt;div class=&#34;col-lg-6&#34;&gt; &lt;div class=&#34;input-group&#34;&gt; &lt;div class=&#34;input-group-btn&#34;&gt; &lt;button type=&#34;button&#34; class=&#34;btn dropdown-toggle btn-primary&#34; data-toggle=&#34;dropdown&#34; aria-expanded=&#34;false&#34;&gt;Search By &lt;span class=&#34;caret&#34;&gt;&lt;/span&gt;&lt;/button&gt; &lt;ul id=&#34;searchBy&#34; class=&#34;dropdown-menu&#34; role=&#34;menu&#34;&gt; &lt;li class=&#34;disabled&#34;&gt;&lt;a href=&#34;#&#34;&gt;Search By...&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&#34;#&#34;&gt;cost&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&#34;#&#34;&gt;name&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id=&#34;everything&#34;&gt; &lt;/div&gt; </code></pre> <p><strong>当我直接加载<pre><code>manager.php</code></pre>并且下拉列表初始化时，此代码工作正常，但这不是我需要代码工作的方式。 </strong> </p>用户从<p><code>return.php</code><pre>开始；此页面从用户收集大量数据并将其</pre>返回<em>到</em><code>manager.php</code><pre>。</pre> </p>一旦用户选择在 <p><code>return.php</code><pre> 上执行此操作，就会运行此代码：</pre> </p><code>$.ajax({ type: &#39;POST&#39;, url: &#39;manager.php&#39;, data: {number:number, location:location, project:project, comments:comments}, success:function(data){ $(&#39;#everything&#39;).html(data); } }); </code><pre> </pre>ajax 调用工作正常，并将从 <p><code>manager.php</code><pre> 返回的数据加载到 </pre><code>everything</code><pre> div 中。 它按预期传递数据。 将 </pre><code>manager.php</code><pre> 加载到 DIV 中时唯一不起作用的是下拉菜单。我需要了解我做错了什么导致了这个功能，这样我就可以防止将来这样做。</pre> </p> </question> <answer tick="false" vote="7">页面加载后无法通过添加引导类来初始化引导组件。为此，您必须自己初始化它<p> </p>要初始化下拉列表，请编写以下代码：<p> </p><code>$(&#39;.dropdown-toggle&#39;).dropdown(); </code><pre> </pre>之后<p> </p><code>$(&#39;#everything&#39;).html(data); </code><pre> </pre>了解更多详情：<p>http://getbootstrap.com/javascript/#dropdowns<a href="http://getbootstrap.com/javascript/#dropdowns" rel="nofollow noreferrer"></a> </p> </answer> <answer tick="true" vote="6">将数据加载到 everything div 后，您需要手动重置下拉列表。我修改了您的 AJAX 调用，以向您展示在哪里进行调用。<p> </p><code>$.ajax({ type: &#39;POST&#39;, url: &#39;manager.php&#39;, data: {number:number, location:location, project:project, comments:comments}, success:function(data){ $(&#39;#everything&#39;).html(data); $(&#39;#searchBy&#39;).dropdown(); } }); </code><pre> </pre>您正在执行的动态加载不会导致 DOM 重新加载，从而强制下拉列表重新初始化。 AJAX 调用完成后，您可以通过调用 <p><code>.dropdown();</code><pre> 手动重置引导下拉列表。</pre> </p><p>编辑<strong></strong> </p>引导程序中的功能通常是使用 <p><code>$( document ).ready()</code><pre> 调用来设置的。该函数在 DOM 加载后并且仅在 DOM 完全加载后执行一次。由于您操作了 DOM，因此不会导致该函数再次被触发，并且您需要手动触发您需要的功能。</pre> </p>您还希望在每个页面上仅加载一次包含内容。他们需要在 manager.php 上，以便在您进入成功方法时该功能可用。我建议您为您的项目使用一个模板，以便您可以在一个地方管理所有包含内容。另外，如果您使用 manager.php 作为要包含在另一个页面中的页面，那么如果您没有对 JavaScript 片段的引用也没关系，因为您不希望用户自己访问该组件。 <p> </p>您正在进行的重新加载似乎强制将内容重新添加到页面，从而强制重新执行包含文件中的 <p><code>$( document ).ready()</code><pre> 调用。你可以这样做，但是效率很低。</pre> </p> </answer> <answer tick="false" vote="1">所以我不确定为什么会这样，但到目前为止是这样：<p> </p>我修改了 ajax 调用以在执行返回之前重新加载 bootstrap 的 .js 文件。<p> </p><code>function reload_js(src) { $(&#39;script[src=&#34;&#39; + src + &#39;&#34;]&#39;).remove(); $(&#39;&lt;script&gt;&#39;).attr(&#39;src&#39;, src + &#39;?cachebuster=&#39;+ new Date().getTime()).appendTo(&#39;head&#39;); } $.ajax({ ... success:function(data){ reload_js(&#39;https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js&#39;); $(&#39;#everything&#39;).html(data); } }); </code><pre> </pre>对于赏金，有人可以向我解释一下吗：<p> </p>a.) 为什么我需要强制重新加载<p><code>bootstrap.min.js</code><pre>？</pre> </p>b.）如果我在两个文件的 <p><code>&lt;head&gt;</code><pre> 部分中都有指向该文件的链接，为什么还需要这样做？</pre> </p><code> &lt;!-- Bootstrap --&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js&#34;&gt;&lt;/script&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;../../css/bootstrapstyle.css&#34;&gt; </code><pre> </pre>我也尝试过将其加载到一个中，但没有加载到另一个中（所以我不会加载两次），但这没有任何作用。<p> </p>c.) 为什么这样有效？ 它在做什么？<p> </p> </answer> <answer tick="false" vote="0">页面将第一次加载 DOM。 ajax 只是更新页面的一部分，因此您添加的新元素不会具有您定义的 prop。你需要像以前那样重新启动或做类似的事情<p> </p><p>http://hussain.io/2012/01/reinitializing-jquery-event-on-ajax-response/<a href="http://hussain.io/2012/01/reinitializing-jquery-event-on-ajax-response/" rel="nofollow noreferrer"></a> </p> </answer> <answer tick="false" vote="0">我想分享我的经验：我正在做动态多层下拉菜单，这意味着用户可以自定义这个菜单有多少个父母和孩子。因此，在 ajax 提交后，我清空菜单所在的导航栏 $(document).find('.navbar-nav').empty();<p> </p>并用新的 html 填充它，例如：<p> html.push("<br/> <li class="nav-item dropdown">" + val.PageName + ""); // 它在顶部<a class="nav-link" href="#"> </p>并将其附加到我的导航栏： $(".navbar-nav").append(html.join(''));<p> </p>下拉菜单项在那里，但不起作用。原因是你必须再次加载新 html 项目的所有 js 和 css。<p> </p>这是操作系统静态多层菜单的好示例：<p>https://github.com/kmlpandey77/bootnavbar<a href="https://github.com/kmlpandey77/bootnavbar" rel="nofollow noreferrer"></a> </p>因此，重点是在将新的 html 附加到 DOM 项后，您需要重新加载页面以使其正常工作，或者加载新的 html 项正在使用的资源；<p> </p>这里如何在ajax和append过程之后加载：<p> </p><code> jQuery.ajaxSetup({ async: false }); $.get(&#34;wwwroot/bootnavbar/bootnavbar.css&#34;) .done(function () { // exists code jQuery.ajaxSetup({ async: true }); }).fail(function () { // not exists code jQuery.ajaxSetup({ async: true }); }); </code><pre> </pre> </answer></body>

如何正确集成保存按钮的部分JS代码为输出脚本

美好的一天。我正在尝试转移Opencart模块，我已经完成了所有操作，但我无法集成主页上输出脚本的保存按钮的部分JS代码。所有这一切都通过

清除运输方式更改的 WooCommerce 海关费用

我正在 Woocommerce 结账页面上实施一些附加字段和费用，具体取决于所选的送货方式。我所坚持的是尝试清除所有费用，如果/当用户更改

通过 Ajax 清除运输方式更改时的 WooCommerce 自定义购物车费用

我正在 Woocommerce 结账页面上实施一些附加字段和费用，具体取决于所选的送货方式。我所坚持的是尝试清除所有费用，如果/当用户更改

Disqus Ajax 不会为 ruby on Rails 中的不同帖子采用不同的线程

我有一个 Rails 应用程序，我使用 Disqus 通用代码来实现评论功能。我正在使用 ajax remote => true 函数来显示我的帖子内容。这是我的disqus代码 我有一个 Rails 应用程序，我使用 Disqus Universal Code 来实现评论功能。我正在使用 ajax remote => true 函数来显示我的帖子内容。这是我的disqus代码 <div id="disqus_thread"></div> <script type="text/javascript"> var disqus_shortname = 'ginfy'; var disqus_identifier = '<%= @posts.id %>'; (function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); </script> <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> 我知道 Disqus 取决于站点 URL，并且它根据不同的 URL 使用不同的线程，但这里我使用 AJAX [URL 没有更改]。 检查我的 erb- <%= link_to "Read more","prayers/#{posts_item.id}",:remote => "true" %> 当我点击“阅读更多”时，Disqus 总是以相同的线程打开。我希望不同的帖子有不同的 disqus 线程，而不牺牲我的 Ajax 功能。 我已经检查了与此问题相关的所有问题，但没有给我解决方案。请帮我。 当您想要更改线程时，您需要使用 Disqus.reset 函数。像下面这样的东西会起作用： <script type="text/javascript"> var changeThread = function(){ DISQUS.reset({ reload: true, config: function () { this.page.identifier = 'new_disqus_identifier'; this.page.url = 'http://example.com/#!new_content'; this.page.title = "New Page Title"; this.language = "fr"; // only if changing the language } }); }; </script> <button onclick=changeThread();>Change the Disqus thread!</button> <div id="disqus_thread"></div> <script type="text/javascript"> var disqus_shortname = 'ginfy'; var disqus_identifier = '<%= @posts.id %>'; (function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); </script> <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> 在全球范围内提供约 3000 个就业机会后，我们的机构仍在全球范围内提供就业和商业贷款。 如果您需要工作或经济援助，请立即通过电子邮件与我们联系：[电子邮件受保护] 谢谢。