Question

我在使用Ajax时遇到了一个奇怪的问题。我有一个名为Main.html的页面，可在本地URL“http://localhost/Main.html”获得，该页面使用Bootstrap进行样式设置。

当页面加载时，jQuery检查特定文件是否存在，然后在Bootstrap面板中加载特定的html;它可以是用于注册/登录服务的html，也可以是直接主页;主页从Home.html加载，可在“http://localhost/Home.html”处找到。

这个主页里面有一些元素，主要的是一个带有更多选项的搜索栏;会发生什么，当用户在栏中插入内容，选择适当的选项并点击“搜索”按钮时，一个名为search（）的jQuery函数（位于Home.html页面的脚本中）发出Ajax请求上面插入数据的'Home.php'页面。

ajax请求是：

function search()
{
    $.ajax({
        type: 'POST',
        url: 'Home.php',
        data: {query: $('#query').val(), searchtype: $('#searchtype').val(), second: $('#second').val()} ,
        success: function (result) {
            alert('success');
            $('#mainPanel').empty();
            $('#mainPanel').append(result);
        },
        error: function (jqXHR) {
            alert('fail');
        }
    });
}

我期望的是直接在面板中加载答案;问题是Ajax请求没有调用正确的URL，因此失败;会发生什么事情，它不会调用“http://localhost/Home.php?query=Something&searchtype=some&second=blabla”，但会调用“http://localhost/Main.html?query=Something&searchtype=some&second=blabla”：它会将请求应用于打开页面的网址而不是我想要的网址。

我习惯了Ajax调用，我经常使用Ajax调用php文件，这是我第一次遇到这种情况。

进一步的信息：

1）我尝试将请求中的网址更改为“http://localhost/Home.php”和“/Home.php”，但没有任何更改。

2）文件'Home.php'包含一些连接MySQL数据库的行（成功），然后这行：

$query=$_POST['query'];
$type=$_POST['searchtype'];
$second=$_POST['second'];

然后对这个变量进行一些操作;在大量开关之后，总会有一个“回音”调用。

3）我正在使用Chrome及其检查器：控制台输出中没有显示任何内容，但是从“网络”标签中我了解到对“Home.php”的调用失败：查询的输出是

注意：未定义的索引：第11行的C：\ xampp \ htdocs \ Home.php中的查询

注意：未定义的索引：第12行的C：\ xampp \ htdocs \ Home.php中的searchtype

注意：未定义的索引：第13行的C：\ xampp \ htdocs \ Home.php中的第二个

所以，似乎在请求期间没有传递变量。此外，以下是请求的标题：

一般

请求网址：http://localhost/Home.php

请求标题

显示临时标题

接受： /

内容类型：应用/ X WWW的窗体-urlencoded;

的charset = UTF-8

原产地：http://localhost

的Referer：http://localhost/Main.html

User-Agent：Mozilla / 5.0（Windows NT 6.1; WOW64）AppleWebKit / 537.36

（KHTML，与Gecko一样）Chrome / 44.0.2403.157 Safari / 537.36

X-Requested-With：XMLHttpRequest

表格数据

查询：Dani第二名：姓名

所以似乎不接受参数'searchtype'......但考虑到它出现在网址中，这很奇怪。

Answer 1

经过CHAT的长时间讨论，我们发现了它。

您必须在按钮上附加一个监听器，而不是使用html onclick <button id="search"></button> 并防止表单提交的默认事件 $('#search').on('click', function(event) {event.preventDefault(); search();}); 此行必须写在search()方法声明

下面

由于错误的网址

1 个答案: