jQuery
Ajax

Syntax

• var jqXHR = $ .ajax (url [, inställningar])
• var jqXHR = $ .ajax ([inställningar])
• jqXHR.done (funktion (data, textStatus, jqXHR) {});
• jqXHR.fail (funktion (jqXHR, textStatus, errorThrown) {});
• jqXHR.always (funktion (jqXHR) {});

parametrar

Anmärkningar

Hantera HTTP-svarskoder med $ .ajax ()

Förutom. .done , .fail och. .always lovar återuppringningar, som utlöses baserat på om begäran var framgångsrik eller inte, finns det alternativet att utlösa en funktion när en specifik HTTP-statuskod returneras från servern. Detta kan göras med hjälp av parametern statusCode .

$.ajax({
    type: {POST or GET or PUT etc.},
    url:  {server.url},
    data: {someData: true},
    statusCode: {
        404: function(responseObject, textStatus, jqXHR) {
            // No content found (404)
            // This code will be executed if the server returns a 404 response
        },
        503: function(responseObject, textStatus, errorThrown) {
            // Service Unavailable (503)
            // This code will be executed if the server returns a 503 response
        }           
    }
})
.done(function(data){
    alert(data);
})
.fail(function(jqXHR, textStatus){
    alert('Something went wrong: ' + textStatus);
})
.always(function(jqXHR, textStatus) {
   alert('Ajax request was finished')
});

Som officiell jQuery-dokumentation anger:

Om begäran är framgångsrik tar statuskodfunktionerna samma parametrar som framgångssuppringningen; om det resulterar i ett fel (inklusive 3xx redirect), de tar samma parametrar som error återuppringning.

Använda Ajax för att skicka ett formulär

Ibland kan du ha ett formulär och vill skicka in det med ajax.

Anta att du har denna enkla form -

<form id="ajax_form" action="form_action.php">
  <label for="name">Name :</label>
  <input name="name" id="name" type="text" />
  <label for="name">Email :</label>
  <input name="email" id="email" type="text" />
  <input type="submit" value="Submit" />
</form>

Följande jQuery-kod kan användas (inom ett $(document).ready samtal) -

$('#ajax_form').submit(function(event){
  event.preventDefault();
  var $form = $(this);

  $.ajax({
      type: 'POST',
      url: $form.attr('action'),
      data: $form.serialize(),
      success: function(data) {
        // Do something with the response
      },
      error: function(error) {
        // Do something with the error
      }
  });
});

Förklaring

• var $form = $(this) - formuläret, cachelagrat för återanvändning
• $('#ajax_form').submit(function(event){ - När formuläret med ID "ajax_form" skickas, kör denna funktion och skicka händelsen som en parameter.
• event.preventDefault(); - Förhindra att formuläret skickas normalt (Alternativt kan vi använda return false efter ajax({}); uttalande, som kommer att ha samma effekt)
• url: $form.attr('action'), - Få värdet på formens attribut "action" och använd det för egenskapen "url".
• data: $form.serialize(), - Konverterar ingångarna i formuläret till en sträng som är lämplig för att skicka till servern. I detta fall kommer det att returnera något som "name=Bob&[email protected]"

Skickar JSON-data

jQuery gör att hantera jSON- svar smärtfritt, men lite mer arbete krävs när en given begäran vill att du skickar data i JSON-format:

 $.ajax("/json-consuming-route", {
      data: JSON.stringify({author: {name: "Bullwinkle J. Moose", 
                                     email: "[email protected]"} }),
      method: "POST",
      contentType: "application/json"
   });

Observera att vi anger rätt contentType för de data vi skickar; Detta är en god praxis i allmänhet och kan krävas av API du skickar till - men det har också sidoeffekt att instruera jQuery inte utföra standard omvandlingen av %20 till + , som det skulle göra om contentType var kvar vid standardvärdet för application/x-www-form-urlencoded . Om du av någon anledning måste lämna contentType som standard, måste du ställa in processData till falskt för att förhindra detta.

Samtalet till JSON.stringify kan undvikas här, men med hjälp av det kan vi tillhandahålla informationen i form av ett JavaScript-objekt (och därmed undvika pinsamma JSON-syntaxfel som att inte ange egendomens namn).

Allt i ett exempel

Ajax Get:

Lösning 1:

$.get('url.html', function(data){
    $('#update-box').html(data);
});

Lösning 2:

 $.ajax({
     type: 'GET',
     url: 'url.php',  
 }).done(function(data){
     $('#update-box').html(data);
 }).fail(function(jqXHR, textStatus){
     alert('Error occured: ' + textStatus);
 });

Ajax Load: En annan ajax get-metod skapad för enkelhet

$('#update-box').load('url.html');

.load kan också anropas med ytterligare data. Datadelen kan tillhandahållas som sträng eller objekt.

$('#update-box').load('url.php', {data: "something"});
$('#update-box').load('url.php', "data=something");

Om .load anropas med en återuppringningsmetod kommer begäran till servern att vara ett inlägg

$('#update-box').load('url.php', {data: "something"}, function(resolve){
    //do something
});

Ajax Post:

Lösning 1:

$.post('url.php', 
    {date1Name: data1Value, date2Name: data2Value},  //data to be posted
    function(data){
        $('#update-box').html(data);
    }
);

Lösning 2:

$.ajax({
    type: 'Post',
    url: 'url.php',  
    data: {date1Name: data1Value, date2Name: data2Value}  //data to be posted
}).done(function(data){
    $('#update-box').html(data);
}).fail(function(jqXHR, textStatus){
    alert('Error occured: ' + textStatus);
});

Ajax Post JSON:

var postData = {
    Name: name,
    Address: address,
    Phone: phone
};

$.ajax({
     type: "POST",
     url: "url.php",
     dataType: "json",
     data: JSON.stringfy(postData),
     success: function (data) {
         //here variable data is in JSON format
     }
 });

Ajax Get JSON:

Lösning 1:

$.getJSON('url.php', function(data){
    //here variable data is in JSON format
});

Lösning 2:

 $.ajax({
      type: "Get",
      url: "url.php",
      dataType: "json",
      data: JSON.stringfy(postData),
      success: function (data) {
          //here variable data is in JSON format
      },    
      error: function(jqXHR, textStatus){
          alert('Error occured: ' + textStatus);
      }
  });

Ajax Avbryta ett samtal eller begära

var xhr = $.ajax({
    type: "POST",
    url: "some.php",
    data: "name=John&location=Boston",
    success: function(msg){
       alert( "Data Saved: " + msg );
    }
});

// döda begäran

xhr.abort()

Ajax filuppladdningar

1. Ett enkelt komplett exempel

Vi kan använda denna provkod för att ladda upp de filer som användaren har valt varje gång en ny filval görs.

<input type="file" id="file-input" multiple>

var files;
var fdata = new FormData();
$("#file-input").on("change", function (e) {
    files = this.files;

    $.each(files, function (i, file) {
        fdata.append("file" + i, file);
    });

    fdata.append("FullName", "John Doe");
    fdata.append("Gender", "Male");
    fdata.append("Age", "24");

    $.ajax({
        url: "/Test/Url",
        type: "post",
        data: fdata, //add the FormData object to the data parameter
        processData: false, //tell jquery not to process data
        contentType: false, //tell jquery not to set content-type
        success: function (response, status, jqxhr) {
            //handle success
        },
        error: function (jqxhr, status, errorMessage) {
            //handle error
        }
    });
});

Låt oss nu dela upp detta och inspektera det delvis.

2. Arbeta med filingångar

Detta MDN-dokument (med hjälp av filer från webbapplikationer) är en bra läsning om olika metoder för att hantera filingångar. Vissa av dessa metoder kommer också att användas i det här exemplet.

Innan vi börjar ladda upp filer måste vi först ge användaren ett sätt att välja de filer de vill ladda upp. För detta ändamål kommer vi att använda en file input . Den multiple egenskapen gör det möjligt att välja mer än en fil, du kan ta bort den om du vill att användaren ska välja en fil åt gången.

<input type="file" id="file-input" multiple>

Vi kommer att använda ingångs change event att fånga filerna.

var files;
$("#file-input").on("change", function(e){
    files = this.files;
});

Inuti hanterarfunktionen får vi tillgång till filerna genom filegenskapen för vår ingång. Detta ger oss en FileList , som är en matrisliknande objekt.

3. Skapa och fylla FormData

För att ladda upp filer med Ajax kommer vi att använda FormData .

var fdata = new FormData();

FileList som vi har fått i föregående steg är ett array-liknande objekt och kan itereras med olika metoder inklusive för loop , för ... av loop och jQuery.each . Vi kommer att hålla fast vid jQuery i det här exemplet.

$.each(files, function(i, file) {
  //...
});

Vi kommer att använda tilläggsmetoden för FormData för att lägga till filerna i vårt formdataobjekt.

$.each(files, function(i, file) {
  fdata.append("file" + i, file);
});

Vi kan också lägga till andra data som vi vill skicka på samma sätt. Låt oss säga att vi vill skicka lite personlig information som vi har fått från användaren tillsammans med filerna. Vi kan lägga till denna information i vårt formdataobjekt.

fdata.append("FullName", "John Doe");
fdata.append("Gender", "Male");
fdata.append("Age", "24");
//...

4. Skicka filerna med Ajax

$.ajax({
    url: "/Test/Url",
    type: "post",
    data: fdata, //add the FormData object to the data parameter
    processData: false, //tell jquery not to process data
    contentType: false, //tell jquery not to set content-type
    success: function (response, status, jqxhr) {
        //handle success
    },
    error: function (jqxhr, status, errorMessage) {
        //handle error
    }
});

Vi ställer in processData och contentType egenskaper till false . Detta görs så att filerna kan skickas till servern och behandlas av servern korrekt.