我正在尝试重新创建 https://jqueryui.com/autocomplete/#remote-jsonp 用我自己的数据库
test.php 的内容
<?php
$host = "localhost";
$user = "root";
$pass = "*";
$databaseName = "easychartdb";
$connect = mysqli_connect($host,$user,$pass,$databaseName);
$sql = "Select * from `calendar`";
$result = mysqli_query($connect,$sql);
$json_array = array();
$array = mysqli_fetch_row($result);
while($row = mysqli_fetch_row($result))
{
$json_array[] = $row;
}
echo json_encode($json_array);
?>
tester.html 的内容。从链接中更改的是源代码:test.php 和错误函数
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Remote JSONP datasource</title>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.ui-autocomplete-loading {
background: white url("images/ui-anim_basic_16x16.gif") right
center no-repeat;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
<script>
$( function() {
function log( message ) {
$( "<div>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$( "#birds" ).autocomplete({
source: function( request, response ) {
$.ajax( {
url: "test.php",
dataType: "jsonp",
data: {
term: request.term
},
success: function( data ) {
response( data );
}
,
error: function (err) {
console.error("error");
console.log(err);
console.log(err.stack);
}
} );
},
minLength: 2,
select: function( event, ui ) {
log( "Selected: " + ui.item.value + " aka " + ui.item.id );
}
} );
} );
</script>
</head>
<body>
<div class="ui-widget">
<label for="birds">Birds: </label>
<input id="birds">
</div>
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
Result:
<div id="log" style="height: 200px; width: 300px; overflow: auto;"
class="ui-widget-content"></div>
</div>
</body>
</html>
控制台日志总是报错
{readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}
abort: ƒ ( statusText )
always: ƒ ()
complete: ƒ ()
done: ƒ ()
error: ƒ ()
fail: ƒ ()
getAllResponseHeaders: ƒ ()
getResponseHeader: ƒ ( key )
overrideMimeType: ƒ ( type )
pipe: ƒ ( /* fnDone, fnFail, fnProgress */ )
progress: ƒ ()
promise: ƒ ( obj )
arguments: null
caller: null
length: 1
name: "promise"
prototype: {constructor: ƒ}
__proto__: ƒ ()
[[FunctionLocation]]: jquery-1.12.4.js:3431
[[Scopes]]: Scopes[3]
readyState: 4
responseText: "[["2","central medical","ryan","ryan","ryan","2019-02-
06 00:00:00","2019-02-07 00:00:00"]]"
setRequestHeader: ƒ ( name, value )
state: ƒ ()
status: 200
statusCode: ƒ ( map )
arguments: null
caller: null
length: 1
name: "statusCode"
prototype: {constructor: ƒ}
__proto__: ƒ ()
[[FunctionLocation]]: jquery-1.12.4.js:9552
[[Scopes]]: Scopes[3]
0: Closure (ajax) {type: "closure", name: "ajax", object: {…}}
1: Closure {type: "closure", name: "", object: {…}}
2: Global {type: "global", name: "", object: Window}
statusText: "OK"
success: ƒ ()
then: ƒ ( /* fnDone, fnFail, fnProgress */ )
__proto__: Object
谁能帮我解决这里的问题，谢谢!
最佳答案
您正在使用 jsonp 但未返回回调。所以有两种选择。将数据类型更改为 json 或修复您的返回值:
测试器.html:
dataType: 'jsonp',
jsonpCallback: 'callback',
测试.php:
echo $_GET["callback"] . "(" . json_encode($json_array) . ")";
代替
echo json_encode($json_array);
Here你可以找到一些关于 jsonp 的信息。
关于javascript - 重新创建 jquery ui 自动完成抛出错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54662768/