如何用jQuery ajax替换javascript ajax?

What i want to do?
I am thinking of changing javascript ajax to jQuery ajax. It seems shorter, and i saw many people using it, but i can't really get it working.

我想做什么?我正在考虑将javascript ajax更改为jQuery ajax。它看起来更短，我看到很多人在使用它，但我真的无法让它发挥作用。

What i have so far?
I have an element:
<li id="unique_id" onmousedown="check_element(event, this)">1</li>
When i click on the element, it check which key has been pressed, if its mouse1 then checks background of the element. If element has no background color it changes it to "red" and add id of the element to MySQL database using ajax. If it had red background already (meaning it was added before) it uses ajax to delete it from database.

到目前为止我有什么?我有一个元素:

当我点击元素时，它会检查哪个键被按下，如果它的mouse1然后检查元素的背景。如果元素没有背景颜色，它会将其更改为“红色”，并使用ajax将元素的id添加到MySQL数据库中。如果它已经有红色背景(这意味着它之前被添加)，它使用ajax从数据库中删除它。

Code
Checking function

代码检查函数

function check_element(evt, e){
    if(evt.which == 1){
        if(e.style.background == "") {
            e.style.background = "red";
            send_with_ajax("add", e);
        } else {
            e.style.background = "";
            send_with_ajax("delete", e);
        }
    }
}

Ajax (with javascript):

Ajax(使用javascript):

function send_with_ajax(action, e){
    var xmlhttp;
    if (window.XMLHttpRequest){
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    } 
    xmlhttp.open("GET","ajax/send_calendar.php?data="+e.id+"&action="+action+"",true);
    xmlhttp.send();
}

send_calendar.php is nothing out of ordinary. Just grabs variables from $_GET[''] and INSERTS or DELETES values from database. The thing is, how can i change this function to make it jQuery Ajax?

send_calendar。php并不是什么普通的东西。只需从$_GET["]中获取变量，并从数据库中插入或删除值。问题是，我如何改变这个函数使它变成jQuery Ajax?

What have i tried?

我试着什么?

function send_with_ajax(action, e){
    $.Ajax({
        type: "GET",
        url: "send_calendar.php",
        data: "data="+e.id+"&action="+action+"",
        success: function(msg){
            alert( "Data Saved: " + msg ); //never shows this alert
        }
    });
}

also i get error:
Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method 'Ajax'

也有错误:未捕获的类型错误:对象函数(a,b){返回new .fn.init(a,b,h)}没有方法“Ajax”

PS. Never worked with jQuery Ajax before, so i have NO CLUE what i am doing wrong.

以前从未使用过jQuery Ajax，所以我不知道自己做错了什么。

2 个解决方案

#1

It's $.ajax (case-sensitive), not $.Ajax.

这是美元。ajax(区分大小写),不是$ . ajax。

Also notice, the data option accepts an object as input and $.ajax will do the parameter serialization by itself.

还要注意，数据选项接受一个对象作为输入和$。ajax将自己进行参数序列化。

$.ajax({
    type: "GET",
    url: "ajax/send_calendar.php",
    data: {
        "data" : e.id,
        "action": action
    },
    success: function(msg) {
        alert("Data Saved: " + msg);
    }
});

There also exist shorthand methods for GET and POST requests, .get() and .post() respectively.

还有GET和POST请求的简写方法，. GET()和. POST()。

#2

-2

If you're going to use jQuery, also make sure to have the correct wrapper code.

如果要使用jQuery，也要确保有正确的包装器代码。

$(document).ready(function() {

 $.ajax({
       type: "GET",
        url: "send_calendar.php",
        data: "data="+e.id+"&action="+action+"",
        success: function(msg){
            alert( "Data Saved: " + msg ); //never shows this alert
        }
    });

});

#1