<div class="top3"> <input id="KeyWord" type="text" class="form1" name="keyWord" value="请输入关键字" onfocus="javascript:if(this.value==‘请输入关键字‘)this.value=‘‘;"> <input type="button" class="form2" name="submit" onClick="getData()" value="Search"> </div> <div id="divPicture"></div>
获得输入框的值 赋值给变量key:
var key = document.getElementById(‘KeyWord‘).value.trim();
再通过ourGet.js里面的下面这句代码:
url:"search.php?keyWord="+key
把输入的关键字传递给PHP代码的:
$keyWord = $_GET[‘keyWord‘]
当然,要实现把关键字传递给PHP并提交到服务器,是在我们点击了Search按钮之后的。
我在Search按钮处给它写了个点击事件,每次我点击,就调用ourGet.js里面的getData()函数
onClick="getData()"
function getData(){ var key = document.getElementById(‘ourKeyWord‘).value.trim(); $.ajax({ url:"search.php?keyWord="+key, //data是成功返回的json串 success:function(data,status){ $(‘#divPicture‘).html("");//清空上一个div var obj = eval( ‘(‘ + data + ‘)‘ );//把json串解析成json对象 var len = obj.length; for(var i=0;i<len;i++){ var img = document.createElement("img");//创建一个img对象 img.src = obj[i]; var div = document.getElementById("divPicture"); div.appendChild(img); } }, error:function(data,status){ alert(‘失败‘); } }); //alert(‘nihao‘); }
switch($action) { case ‘init_data_list‘: init_data_list(); break; case ‘add_row‘: add_row(); break; case ‘del_row‘: del_row(); break; case ‘edit_row‘: edit_row(); break; }
//查询方法 function init_data_list(){ //测试 运行crud.html时是否可以获取到 下面这个字符串 /*echo "46545465465456465";*/ //查询表 $sql = "SELECT * FROM `t_users`"; $query = query_sql($sql); while($row = $query->fetch_assoc()){ $data[] = $row; } $json = json_encode(array( "resultCode"=>200, "message"=>"查询成功!", "data"=>$data ),JSON_UNESCAPED_UNICODE); //转换成字符串JSON echo($json); }
function searchData() { var search_url = "./php/data.php"; //url 中问号后面的参数 action,这个对象就是查询的参数 var dataParam = { action: "init_data_list" }; $.ajax({ type: "get", url: search_url, data: dataParam, dataType: ‘json‘, contentType: ‘application/json; charset=utf-8‘, success: function(data) { //测试是否可以拿到php中的数据 console.log(data); //遍历这个数组 if(data.resultCode == 200) { var itemArr = data.data; for(var i = 0; i < itemArr.length; i++) { var item = itemArr[i]; console.log(item); } } }, error: function(data) { alert(‘服务器出错‘); }, }); }
原文地址:https://www.cnblogs.com/dudu123/p/10044759.html
时间: 2024-11-05 15:51:23