Question

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中编写完全相同的功能？

Answer 1

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!");
    }
});

Answer 2

使用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

        },
});

Answer 3

请检查：

$(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", 'POST', $("#form1").serialize(), "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", 'POST','id='+ID, "delete");
    }

});

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

    ajaxRequest("controller/event.php?event=edit", 'POST','id='+ID, "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, type, data, action){
var jsonData = "";
$.ajax({
    url: url, //'function.php?event=update'
    data: data, //'code=masterpogi&name=masterpogitalagalang&id=21',
    dataType: 'json',
    type: type, //'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 () {

    }
});
}

如何在jQuery中使用Ajax

3 个答案: