$.ajax 不从 .php 读取回显

Question

我正在尝试让 ajax 读取 post 一个 php 文件的回显到搜索建议框中，但它似乎不起作用。有什么错误的建议吗？

(代码更新为没有简单的错误，但仍然没有给出想要的结果)

$(document).ready(function(){
    var left = $('#start').position().left;
    var top = $('#start').position().top;
    var width = $('#start').width();

    $("#suggestionbox").css("left", left+40).css("top", top+60).css("width", width);

    $("#start").keyup(function(){
    var value =  $("#start").val();
    if(value != ''){
            $.ajax(
                {
            type: 'POST',
            url: 'search.php',
            data: {value: value},
            dataType: 'html',
            success: function(data) { 
                debugger;  
                $("#suggestionbox").html(data);
                alert(data); 
                }, //success    
            error: function(){
                alert("nothing");
            } //error
            }); //$.post
        } //if
        }); //keyup
}); //ready

php

<?php echo 'Working!'; ?>

表格和 html 文件中的 div

<form class="inputForm" action="#">
<fieldset>
<input name='start' id="start" class="inputStart" type="text"  placeholder="Start" onfocus="(this.value == 'Start') && (this.value = '')" onblur="if (this.value == '') {this.value = 'Start';}" onfocus="if (this.value == 'Start') {this.value = '';}" />
<input name='end' id="End" class="inputFinish" type="text" placeholder="End" onfocus="(this.value == 'End') && (this.value = '')" onblur="if (this.value == '') {this.value = 'End';}" />
 <select name="count">
<option value="1">1</option>
</select>
<input class="inputDate" type="text" data-type="date" id="datepicker" value="date" />
<input class="searchbutton" type="submit" value=" " />
</fieldset>
</form> 

<div id="suggestionbox">
</div>

注意： php文件和js在同一个文件夹下

更新：

 $("#start").keyup(function(){
   var value =  $("#start").val();
 if(value != ''){
   $.ajax(
    {
   type: 'POST',
   url: 'search.php',
   data: {value: value},
   dataType: 'html', 
   success: function(data) { 
    debugger;
    $("#suggestionbox").html(data);
    alert(data); 
    }, //success 
   error: function(){
    alert('error');
   } //error
   }); //$.ajax
  } //if
      }); //keyup

上面显示的（已修复）代码没有将任何内容放入#suggestionbox 字段并且警报输出是 php 文件的完整代码：

<?php 
echo 'Working!'; 
?>

Answer 1

您表单中的输入字段没有名称属性。

<form class="inputForm" action="#">
<fieldset>
<input name='start' id="start" class="inputStart" type="text"  placeholder="Start" onfocus="(this.value == 'Start') && (this.value = '')" onblur="if (this.value == '') {this.value = 'Start';}" onfocus="if (this.value == 'Start') {this.value = '';}" />
<input name='ciel' id="ciel" class="inputFinish" type="text" placeholder="End" onfocus="(this.value == 'End') && (this.value = '')" onblur="if (this.value == '') {this.value = 'End';}" />
 <select name="count">
<option value="1">1</option>
</select>
<input class="inputDate" type="text" dtat-type="date" id="datepicker" value="date" />
<input class="searchbutton" type="submit" value=" " />
</fieldset>
</form>

我不确定 jQuery 但看起来那里有错字 - 你使用 typo:'POST' - 这不应该是 type:'POST' 吗？

Answer 2

您是否在控制台中查看过任何 Javascript 错误？在任何情况下，这都是有效的（这几乎是你上面的代码逐字）：http://jsfiddle.net/5jzskmyg/1/

我看到您现在已将代码放入 $(document).ready() 回调中，因此我建议放入日志语句以确保所有内容都被正确加载（也许脚本本身没有加载）。例如：

console.log(1);

$(document).ready(function(){
    console.log(2);

    var left = $('#start').position().left;
    var top = $('#start').position().top;
    var width = $('#start').width();

    $("#suggestionbox").css("left", left+40).css("top", top+60).css("width", width);

    $("#start").keyup(function(){
        console.log(3);

        var value =  $("#start").val();
        if(value != ''){
            $.ajax(
            {
                type: 'POST',
                url: 'search.php',
                data: {value: value},
                dataType: 'html', 
                success: function(data) { 
                    console.log(4);

                    debugger;
                    $("#suggestionbox").html(data);
                    alert(data); 
                    }, //success    
                error: function(){
                    alert('error');
                } //error
            }); //$.ajax
        } //if
    }); //keyup
}); //ready

Answer 3

最后最麻烦的事情是 PHP 模块。之前工作不正常，但现在已经修复了，运行很漂亮。

$.ajax 不从 .php 读取回显

$.ajax does not read echo from .php

php

forms

ajax

jquery

echo