如何在jQuery中使用Ajax

问题描述

|

function ajaxFunction(){

    var ajaxRequest;  // The variable that makes Ajax possible!

try{
        // Opera 8.0+,Firefox,Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject(\"Msxml2.XMLHTTP\");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject(\"Microsoft.XMLHTTP\");
            } catch (e){
                // Something went wrong
                alert(\"Your browser broke!\");
                return false;
            }
        }
    }

    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4 && ajaxRequest.status==200){
        alert(ajaxRequest.responseText);
        }
    }


    var txt = document.getElementById(\"data\");
    ajaxRequest.open(\"POST\",\"hello.php\",true);

    ajaxRequest.send(\"user=\" + txt.value); 
        alert(\"here\");
   }

如何在jQuery Ajax中编写完全相同的功能？     

解决方法

var txt = $(\'#data\').val();

$.ajax({
    url: \'hello.php\',type: \'post\',data  : { user: txt },success: function(data) {
        alert(data);
    },error : function(err,req) {
        alert(\"Your browser broke!\");
    }
});

    ,使用jQuery，您不必为此感到头疼。 只需使用

$.ajax

函数http://api.jquery.com/jQuery.ajax/，而不必担心浏览器的兼容性或... 一个简单的例子在这里

$.ajax({
    url: \'someserverfile.php?someparam_or_nothing\',//url
    type: \'get\',//method type post or get
    dataType: \'json\',//return data type            
    success: function(data) { 
            //on success function handler

        },});

    ,请检查以下内容：

$(document).ready(function(){
if (getParameterByName(\'t\') == \'\'){
    loadModal();
}else{
    enableButton();
}

$(\"#btnNew\").click(function(){
    clearModal();
    $(\"#employee_modal\").modal(\'show\');
});

$(\".save\").click(function(){
    if ($(\"#id\").val() == 0){
        ajaxRequest(\"controller/event.php?event=save\",\'POST\',$(\"#form1\").serialize(),\"save\");
    }else{
        ajaxRequest(\"controller/event.php?event=update\",\"update\");
    }
});

$(\".delete\").click(function(){
    var _this=$(this).parent().parent();       
    var ID=_this.attr(\'data-id\');

    var ans = confirm(\'Are you sure you want to delete this employee?\');

    if (ans == true) {
        ajaxRequest(\"controller/event.php?event=delete\",\'id=\'+ID,\"delete\");
    }

});

$(\".edit\").click(function(){
    var _this=$(this).parent().parent();       
    var ID=_this.attr(\'data-id\');

    ajaxRequest(\"controller/event.php?event=edit\",\"edit\");

});
});

function loadModal(){
    $(\"#greeting\").modal(\'show\');
}

function loadModal2(){
    $(\"#employee_modal\").modal(\'show\');
}

function getData(url,type,data){
var jsonData = null;

$.ajax({
    url: url,dataType: \"json\",data:data,type: type,async: false,success: (
        function(data) {
            jsonData = data;
        }),error: function(xhr,status,error){
    }
});
return jsonData;
}

function enableButton(){
var activeForm = getParameterByName(\'t\');

switch (activeForm){
    case \"employee\":
        $(\'#btnEmployee\').attr(\'src\',\'assets/img/employee.png\');
        $(\'#btnHome\').attr(\'src\',\'assets/img/home-hover.png\');
        break;
    default:
        $(\'#btnEmployee\').attr(\'src\',\'assets/img/employee-hover.png\');
        $(\'#btnHome\').attr(\'src\',\'assets/img/home.png\');
}
}

function getParameterByName(name) {
name = name.replace(/[\\[]/,\"\\\\\\[\").replace(/[\\]]/,\"\\\\\\]\");
var regex = new RegExp(\"[\\\\?&]\" + name + \"=([^&#]*)\"),results = regex.exec(location.search);
return results == null ? \"\" : decodeURIComponent(results[1].replace(/\\+/g,\" \"));
}

function clearModal(){
$(\"#myModalLabel\").html(\'\');
$(\"#myModalLabel\").html(\'New Record\');
$(\"#lastname\").val(\'\');
$(\"#firstname\").val(\'\');
$(\"#email\").val(\'\');
$(\"#id\").val(0);
}

function ajaxRequest(url,data,action){
var jsonData = \"\";
$.ajax({
    url: url,//\'function.php?event=update\'
    data: data,//\'code=masterpogi&name=masterpogitalagalang&id=21\',dataType: \'json\',//\'POST\',success: function(result) {
        switch (action){
            case \'save\':
                if (result.success == true){
                    alert(result.message);
                    location.reload();
                }
                break;
            case \'delete\':
                if (result.success == true){
                    alert(result.message);
                    location.reload();
                }
                break;
            case \'edit\':
                $(\"#myModalLabel\").html(\'\');
                $(\"#myModalLabel\").html(\'Update Record\');
                $(\"#lastname\").val(result.lastname);
                $(\"#firstname\").val(result.firstname);
                $(\"#email\").val(result.email);
                $(\"#id\").val(result.id);
                loadModal2();
                break;
            case \'update\':
                if (result.success == true){
                    alert(result.message);
                    location.reload();
                }
                break;
            default:
        }
    },error: function () {

    }
});
}