$。ajax不读取来自.php的回显

Question

我正在尝试让ajax读取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

您是否在控制台中查找到任何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 2

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

<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 3

最后，最麻烦的是PHP模块。无法正常工作，但现在已修复且可以正常运行。

Answer 4

最后，最麻烦的是PHP模块。无法正常工作，但现在已修复且可以正常运行。