如何通过ajax将json值从php页面返回到html页面以及如何在html页面上显示结果

时间:2014-06-20 12:37:44

标签: javascript php ajax json codeigniter

我在php和ajax中验证电子邮件ID,并希望将值从php页面返回到JSON格式的html。

我想在php变量中保留该返回值以供进一步使用。

我在codeigniter中完成所有这些操作,并且我希望在我的AJAX处理时显示.gif图像。 (预装载机图像)

AJAX /使用Javascript / jQuery的:

function checkEmail(value_email_mobile) {
    if (value_email_mobile !== '') {
        //alert('te');
        $.ajax({
            type: "POST",
            url: url_check_user_avail_status,
            data: "value_email_mobile=" + value_email_mobile,
            success: function(msg) {
                alert(msg);
                //$('#psid').html("<img src='images/spacer.gif'>");
                // $('#stat').html(msg);
                //
                //$('#sid').sSelect({ddMaxHeight: '300px'});
            },
            error: function() {
                //alert('some error has occured...');
            },
            start: function() {
                //alert('ajax has been started...');    
            }
        });
    }
}

PHP /控制器:

<?php

function check_email_or_mobile($param)
{
    $ci = CI();
    $value = $param['email_or_mobile'];
    $query = "SELECT user_email , mobile FROM tb_users WHERE user_email = '$value' or  mobile = '$value'";
    $query = $ci->db->query($query);
    if ($query->num_rows() > 0)
    {
        if (is_numeric($value))
        {
            return $res = "This mobile number is not registerd";
        }
      else
        {
            return $res = "This Email id  is not registerd";
        }
    }
}

3 个答案:

答案 0 :(得分:0)

让我们知道您的代码中哪些部分无效?

1)检查请求流是否正在检查函数checkEmail? PHP内置了JSON转换实用程序json_encode。你可以开始使用它。

2)如果您想将其存储在服务器上以供进一步使用,您可以考虑使用

a)将其存储在数据库中(如果真的需要根据您的要求。注意:这总是很昂贵)    b)会话 - 如果您希望此信息也可供所有其他用户使用    c)或者像memcache等任何缓存机制一样将它保存在内存中

3)用于显示忙碌显示,

// Before the below ajax call, show the busy display
$.ajax({
});
// After the ajax call, hide the busy display. 

您可以根据自己的选择使用JavaScript / JQuery执行此操作。

答案 1 :(得分:0)

这只是为了给你一个如何运作的例子。

首先,(显然)必须在文档中准备好预加载器图像。这必须最初隐藏。

其次,在触发AJAX请求之前,显示加载动画GIF。

第三,请求后如果成功。在success:内的$.ajax()块内再次隐藏图片。

考虑这个例子:Sample Output

PHP:

function check_email_or_mobile($param) {
    // your functions, processes, blah blah
    // lets say your processes and functions takes time
    // lets emulate the processing by using sleep :)
    sleep(3); // THIS IS JUST AN EXAMPLE! If your processing really takes time
    $data['message'] = 'Process finished!';

    // with regarding to storing, use sessions $_SESSION for further use
    $_SESSION['your_data'] = $data_that_you_got;

    echo json_encode($data); // use this function
    exit;
}

// just a simple trigger for that post request (only used in this example)
// you really dont need this since you will access it thru your url
// domain/controller/method
if(isset($_POST['request'])) {
    check_email_or_mobile(1);
}

HTML / jQuery的/ AJAX:

<!-- your animated loading image -->
<img src="http://i600.photobucket.com/albums/tt82/ugmhemhe/preloader.gif" id="loader" style="display: none;" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- <script type="text/javascript" src="jquery.min.js"></script> -->
<script type="text/javascript">
$(document).ready(function(){

    // before the request, show the GIF
    $('#loader').show();

    $.ajax({
        url: document.URL, // JUST A SAMPLE (url_check_user_avail_status)
        type: 'POST',
        data: {request: true},
        dataType: 'JSON',
        // data: "value_email_mobile=" + value_email_mobile,
        success: function(response) {
            // After a succesful response, hide the GIF
            $('#loader').fadeOut(); 
            alert(response.message);
        }
    });

});
</script>

我的假设是,因为这只是一个简单的电子邮件检查,所以这不会占用一大块时间。另一种方法是假装加载过程。

success: function(response) {
    // After a succesful response, hide the GIF

    // Fake the loading time, lets say 3 seconds
    setInterval(function(){
        $('#loader').fadeOut();
        alert(response.message);
    }, 3000);

}

答案 2 :(得分:0)

我记得使用

JSON.parse(数据)

将JSON转换为javascript对象。

Jquery有自己的JSON解析器顺便说一句。像$ .JSONParse(数据)

这样的东西