Question

我试图让ajax读取并将一个php文件的回显发布到搜索suginstion框中，但它似乎无法正常工作。有什么建议错误吗？

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

$(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文件中的form和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，但看起来有一个错字 - 你使用拼写错误：＆＃39; POST＆＃39; - 如果不是类型：＆＃39; POST＆＃39;？

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模块。没有正常工作，但它现在已经修好了，它正在运行beautifly。

感谢。

$ .ajax不读取.php中的echo

3 个答案: