html与js和php之间实现数据交互
<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 = ElementById('KeyWord').im();
再通过ourGet.js⾥⾯的下⾯这句代码：
url:"search.php?keyWord="+key
把输⼊的关键字传递给PHP代码的：
$keyWord = $_GET['keyWord']
当然，要实现把关键字传递给PHP并提交到服务器，是在我们点击了Search按钮之后的。
我在Search按钮处给它写了个点击事件，每次我点击，就调⽤ourGet.js⾥⾯的getData()函数
onClick="getData()"
function getData(){
var key = ElementById('ourKeyWord').im();
$.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 = ateElement("img");//创建⼀个img对象
img.src = obj[i];
var div = ElementById("divPicture");
div.appendChild(img);
}
},
error:function(data,status){
alert('失败');
}
});
//alert('nihao');
}
  switch($action) {
case 'init_data_list':
init_data_list();
break;
case 'add_row':js获取json的key和value
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);
//遍历这个数组
sultCode == 200) {
var itemArr = data.data;
for(var i = 0; i < itemArr.length; i++) {
var item = itemArr[i];
console.log(item);
}
}
},
error: function(data) {
alert('服务器出错');
},
});
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。