zoukankan      html  css  js  c++  java
  • 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 = 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('服务器出错');
                        },
                    });
                }
  • 相关阅读:
    巴洛克式和哥特式的区别
    推荐阅读书籍,是时候再行动起来了。
    AtCoder ABC 159F Knapsack for All Segments
    AtCoder ABC 159E Dividing Chocolate
    AtCoder ABC 158F Removing Robots
    AtCoder ABC 158E Divisible Substring
    AtCoder ABC 157F Yakiniku Optimization Problem
    AtCoder ABC 157E Simple String Queries
    AtCoder ABC 157D Friend Suggestions
    AtCoder ABC 156F Modularness
  • 原文地址:https://www.cnblogs.com/dudu123/p/10044759.html
Copyright © 2011-2022 走看看