Miten saada post data jquery. Ajax-pyyntö POST-menetelmällä, esimerkiksi json_encode. Haetaan json-tietoja getJSON:n avulla
Metodi jQuery.post() tekee HTTP POST -pyynnön tietojen hakemiseksi palvelimelta.
jQuery.post() -menetelmän syntaksijQuery.post(url [, data ] [, menestys(data, tekstin tila, jqXHR) ] [, datatyyppi ])
- url - merkkijono, joka sisältää pyynnön URL-osoitteen tietojen lähettämistä varten.
- data - merkkijono tai tavallinen objekti (assosiatiivinen array) palvelimelle lähetettävästä tiedosta.
- success(data, textStatus, jqXHR) - takaisinsoittotoiminto, kutsutaan, jos pyyntö onnistuu.
- dataType - merkkijono, palvelimelta odotettu tietotyyppi. Oletusarvoisesti jQuery yrittää tunnistaa automaattisesti (xml, json, skripti tai html).
Alla oleva esimerkki on jQuery.ajax()-vastine tiedostolle jQuery.post():
$.ajax((tyyppi: "POST", url: url, tiedot: tiedot, menestys: menestys, dataType: dataType ));
Onnistuneelle takaisinkutsutoiminnolle välitetään palautustiedot, jotka voivat olla XML-juurielementti, tekstimerkkijono, JavaScript-tiedosto tai JSON-objekti vastauksen MIME-tyypistä riippuen. Myös vastauksen tekstitila välitetään.
Alkaen jQuery 1.5:stä jqXHR-objekti välitetään onnistumisfunktiolle.
Useimmat menestyskäsittelijän toteutukset on asetettu seuraavasti:
JQuery.post("ajax/test.html", funktio(data) ( $(.tulos").html(data; ));
Tämä esimerkki pyytää HTML-koodia ja lisää sen sivulle määritettyyn paikkaan.
jQuery.post()-metodin vastaanottamia tietoja ei koskaan tallenneta välimuistiin, joten jQuery.ajaxSetup()-metodin välimuisti ja ifModified-parametrit ohitetaan.
jqXHR-objekti.jQuery 1.5:stä lähtien kaikki AJAX-menetelmät palauttavat laajennetun XMLHttpRequest-objektin. Tämä on jQuery XHR -objekti tai lyhennettynä jqXHR, jonka jQuery.post() palauttaa toteuttaen Promise-rajapinnan tarjoamalla sille kaikki Promise-ominaisuudet, -menetelmät ja -käyttäytymisen (lisätietoja on kohdassa Siirretty objekti). jqXHR.done() (menestyksen sijaan), jqXHR.fail() (virheen sijaan) ja jqXHR.always() (complete) vie argumentin funktiolle, jota kutsutaan, kun pyyntö on suoritettu. Lisätietoja tämän funktion argumenteista on jQuery.ajax() -dokumentaatioosassa.
Promise-rajapinta sallii myös jQueryn AJAX-menetelmien, mukaan lukien JQuery.post(), luoda ketjun jqXHR.done(), jqXHR.fail(), jqXHR.always(), eli. useita takaisinsoittomenetelmiä pyyntöä kohden ja jopa määrittää nämä toiminnot pyynnön suorittamisen jälkeen. Jos pyyntö on jo suoritettu, uudet määritetyt menetelmät suoritetaan välittömästi.
// Määritä pyynnöt heti pyynnön jälkeen // ja tallenna tämän pyynnön jqXHR-objekti. var jqxhr = $.get("esimerkki.php", function() ( hälytys("onnistui"); )) .done(function() ( alert("toinen menestys"); )) .fail(function() ( alert("virhe" )).always(function() ( hälytys("valmis"); )); // Suorita jokin koodi tässä... // Lisää uusi pyynnön viimeistelykäsittelijä jo suoritetulle pyynnölle jqxhr.always(function())(alert("toinen valmis");));
Vanhentuneet käsittelijät.Menetelmät jqXHR.success(), jqXHR.error(), jqXHR.complete() on poistettu käytöstä jQuery 1.8:n jälkeen. Nämä menetelmät poistetaan tulevaisuudessa. Käytä sen sijaan komentoja jqXHR.done(), jqXHR.fail(), jqXHR.always().
Lisähuomautus.- Selaimen suojausrajoitusten vuoksi useimpia AJAX-pyyntöjä rajoittaa sama suojauskäytäntö. AJAX-pyynnöt eivät voi onnistuneesti noutaa tietoja muista toimialueista, aliverkkotunnuksista tai protokollista.
- Jos jQuery.get()-pyynnön aikana tapahtuu virhe, sitä ei tapahdu havaittavasti ennen kuin globaali jQuery.ajaxError()-menetelmä kutsutaan. Vaihtoehto virheenkäsittelylle jQuery 1.5:stä lähtien on jQuery.get(:n) palauttama jqXHR-objekti.
Esimerkki: Test.php-sivulle tehdään pyyntö, mutta tietoja ei käsitellä.
JQuery.post("testi.php");
Esimerkki: Pyyntö test.php-sivulle, jossa on joitakin tietoja lähetetty (käsittelemättä vastaanotettuja tietoja).
JQuery.post("test.php", ( nimi: "John", aika: "14pm" ));
Esimerkki: Joukko dataa siirretään palvelimelle (käsittelemättä vastaanotettuja tietoja).
JQuery.post("test.php", ("valinnat": ["Jon", "Susan"]));
Esimerkki: lomaketietojen lähettäminen Ajax-pyynnön avulla.
JQuery.post("test.php", jQuery("#testform").serialize());
Esimerkki: Ilmoitamme onnistuneesta tiedon vastaanottamisesta test.php-sivulta (HTML tai XML, riippuen vastaanotetuista tiedoista).
JQuery.post("test.php", function(data) ( alert("Data Loaded: " + data); ));
Esimerkki: Test.cgi-sivun onnistuneesta vastaanottamisesta ilmoitamme lisätietojen lähettämisellä (HTML tai XML riippuen vastaanotetuista tiedoista).
JQuery.post("test.php", ( nimi: "John", aika: "14pm" )) .done(function(data) ( alert("Ladattu data: " + data); ));
Esimerkki: Hae test.php-sivun sisältö JSON()-muodossa ja tulosta se sivulle.
JQuery.post("test.php", function(data) ( $("body").append("Nimi: " + data.nimi) // John .append("Aika: " + data.aika); / /14pm), "json");
Esimerkki: Lomaketietojen lähettäminen Ajax-pyynnöllä ja vastaanotettujen tietojen lisääminen div-kenttään.
// lisää lomakkeen lähetyskäsittelijä $("#searchForm").submit(function(event) ( // poista käytöstä lomakkeen käsittelijän event.preventDefault(); // saada tietoja sivuelementeistä var $form = $(this) , term = $form.find("input").val(), url = $form.attr("toiminta" // lähettää tiedot palvelimelle POST-pyynnöllä var posting = $.post (url, ( s: term )); // lisää vastaanotetut tulokset posting.done(function(data) ( var content = $(data).find("#content"); $("#result").empty (.liitä(sisältö) ));
En voi lähettää yksinkertaista pyyntöä servletille jQueryn avulla. Mutta samaan aikaan, jos lähetän sen lomakkeen kautta, kaikki toimii räjähdysmäisesti. Alla on index.html, josta haluan lähettää käyttäjätunnuksen. login.js, johon muodostan itse pyynnön, SerletStore.java itse servletin. Ja koko projektin rakenne.
login.js Ainoa enemmän tai vähemmän toimiva URL-osoite = "http://localhost:8080/testservlet/post", ja ne "/testservlet/post", "testservlet/post", "/post", "post" aiheuttavat 404 virhe.
Funktio addNewVoting() ( var xhr = new XMLHttpRequest(); var body = "name=" + encodeURIComponent("nimi") + "&sukunimi=" + encodeURIComponent("sukunimi"); xhr.open("POST", "http" ://localhost:8080/testservlet/post", true) xhr.setRequestHeader("Sisältötyyppi", "sovellus/x-www-lomake-urlencoded") xhr.send(body); ); toiminto addNewVoting1() ( var user = ( "etunimi": "vlad" ) var JSONString = JSON.stringify(user); var url = "http://localhost:8080/testservlet/post"; $.ajax(( url : url, menetelmä: "post", data: JSONString, contentType: "application/json", error:function (viesti) ( var JSONObject = JSON.parse(viesti); console.log(JSONObject); ), menestys:funktio (data) ( var JSONObject = JSON.parse(data); console.log(JSONObject); ), otsikot: ( "Accept":"application/json", "Accept-Language":"en", "Cache-Control ":"enimmäisikä=3600" ) ));
Kutsuttaessa toista funktiota se tulostaa tämän:
index.html
sisäänkirjautumislomake
ServletStore.java
Tuo javax.servlet.ServletException; tuonti javax.servlet.annotation.WebServlet; tuonti javax.servlet.http.HttpServlet; tuonti javax.servlet.http.HttpServletRequest; tuonti javax.servlet.http.HttpServletResponse; tuonti java.io.IOException; tuonti java.io.PrintWriter; @WebServlet(name="post", urlPatterns = "/post") julkisen luokan Servlet laajentaa HttpServlet-palvelinta ( @Override suojattu void doGet(HttpServletRequest req, HttpServletResponse resp) heittää ServletException, IOException, IOException, writer =ter.Wspri. writerwri (Re.Wsp.) print("Hei"); @Override protected void doPost(HttpServletRequest req, HttpServletResponse) heittää ServletExceptionin, IOExceptionin ( super.doPost(req, resp; ) )
Hankkeen rakenne.
Post()-menetelmä on tyypillisesti tarkoitettu tietojen lähettämiseen palvelimelle (esimerkiksi lomakkeesta).
Post-menetelmän yhteydessä kannattaa mainita json - javascriptiin perustuva tekstimuoto. Voidaan käyttää lähes millä tahansa ohjelmointikielellä.
jQuery, Ajax-pyyntö POST-menetelmällä jQuery.post(url,,,)- Ensimmäinen argumentti (url) on sen asiakirjan URL-osoite, johon pyyntö lähetetään;
- Toinen argumentti (data) on palvelimelle lähetetty data, joka yleensä esitetään js-objektina;
- Kolmas argumentti (takaisinsoitto(data, tekstiTila, jqXHR)) on funktio, jota kutsutaan palvelimen vastauksen jälkeen. Tämä toiminto ottaa argumenteiksi palvelimen vastauksena pyyntöön lähettämät tiedot ja pyynnön suoritustavan.
PHP:ssä (versiosta 5.2 alkaen) JSON-tuki sisältyy ytimeen json_decode()- (purkaa JSON-merkkijonon) ja json_encode()-funktioiden muodossa, jotka itse muuntavat JSON-tietotyypit vastaaviksi PHP-tyypeiksi ja päinvastoin.
Tulos ("a":1,"b":2,"c":3,"d":4"e":5) PHP-esimerkki json_decode-funktiosta $json = "("a":1," b ":2)"; var_dump(json_decode($json, tosi)); $arr = json_decode($json, tosi); kaiku"".$arr["a"]. "
".$arr["b"]. "
"; Tulos array(5) ( ["a"] => int(1) ["b"] => int(2) ) 1 2 Esimerkki Ajax-pyynnöstä POST-menetelmällä
Mitä me teemme:
Tarkistamme lähetettyjen tietojen oikeellisuuden (AJAX POST -pyynnön kautta) (tiedot syöttää käyttäjä). Jos tiedot ovat oikein, näytämme viestin. Muussa tapauksessa lisäämme kenttiin punaiset korostukset. Kaikki toimii asynkronisesti, eli ilman sivun uudelleenlatausta. Tämän periaatteen avulla voit esimerkiksi luoda kommenttijärjestelmän, joka lisää kommentteja tietokantaan.
JQuery on javascript-kirjasto, jonka tavoitteena on "kirjoittaa vähemmän, tehdä enemmän". jQuery on helppo yhdistää sivustoosi ja aloittaa käyttö. jQuery helpottaa JavaScriptin käyttöä sivustossasi.
jQuery eliminoi suuren määrän JavaScript-koodirivejä ja mahdollistaa näiden rivien toteuttamisen yhdellä menetelmällä.
Mikä on AJAX?AJAX on asynkroninen (eli selain voi tehdä mitä tahansa pyynnön lähettämisen jälkeen, kuten näyttää vastausta odottavan viestin, vierittää sivua jne.) JavaScript ja XML. Sitä käytetään dynaamisten ja nopeiden verkkosivujen luomiseen. AJAXin avulla voimme päivittää osan verkkosivusta lataamatta koko sivua uudelleen.
Entä jQuery ja AJAX?jQueryn ja AJAXin yhdistelmä tarjoaa tehokkaita toimintoja. Jqueryn ja ajaxin avulla voit tehdä pyyntöjä ja vastaanottaa tietoja useissa eri muodoissa, mukaan lukien XML, HTML ja jopa pelkkä teksti. Voit käyttää JSON-muotoa tietojen vaihtamiseen. Voimme käyttää ajax-pyynnön kautta saatuja tietoja html-sivullamme.
jQuery tekee nykyisestä selaimen Ajax API:sta tehokkaamman ja helpompi käyttää. Ajax-kutsujen tekeminen normaalilla tavalla javascriptillä on hieman hankalaa: koska on otettava huomioon, että eri selaimet vaativat erilaisia lähestymistapoja XMLHttpRequest-objektin luomiseen. Lisäksi tietojen lähettäminen esimerkiksi lomakkeista vaikeutuu, jos ajax-kutsussa käytetään tavallista javascriptiä.
jQuery tarjoaa yksinkertaisia ja tehokkaita toimintoja, jotka laajentavat javascriptin AJAX-menetelmiä ja tarjoavat joustavamman lähestymistavan.
Tässä lyhyessä artikkelissa näytän sinulle, kuinka jQueryä ja AJAXia käytetään yksinkertaisessa php-muodossa. Aloitetaan... JQueryn ja AJAXin käyttämiseen tarvitsemme kaksi tiedostoa, joista ensimmäinen sisältää html/php-koodin, jonka kautta ajax-pyyntö tehdään. Toisessa tiedostossa käsittelemme ajax-pyynnön ja palautamme tuloksen ensimmäiselle sivulle.
Vaihe 1: Luo school.php-tiedosto ja liitä siihen seuraava koodi:Yllä olevasta koodista saamme opiskelijan nimen ja numeron ja jqueryn ja ajaxin avulla lähetämme ne osoitteeseen details.php.
funktio getdetails())( var name = $("#name").val(); var rno = $("#rno").val(); $.ajax(( tyyppi: "POST", url: " tiedot .php", data: (fname:name, id:rno) )).done(function(result) ( $("#msg").html(" Roll no " +rno +" on "+tulos ) ; ));
| Sinun nimesi: | ||
| Rullanumero: | ||
Yllä olevaan koodiin saamme opiskelijan osoitteen järjestysnumeron ja nimen avulla.
Tätä esimerkkiä varten sinun on luotava koulun tietokanta ja oppilastaulukko. Opiskelijataulukko sisältää kentät, joissa on nimet, järjestysnumerot ja osoitteet.
Toivon, että tämä artikkeli auttaa sinua.
jQuery.post(url [, data] [, menestys(data, tekstin tila, jqXHR)] [, tietotyyppi])
url
Tyyppi: merkkijono
Osoite, johon pyyntö lähetetään.
tiedot
Tyyppi: objekti tai merkkijono
Tiedot lähetetään palvelimelle objektina (avain:arvo) tai merkkijonona.
Tyyppi: toiminto
Funktio, jota kutsutaan, kun Ajax-pyyntö on suoritettu onnistuneesti.
tietotyyppi
Tyyppi: merkkijono
Palvelimen vastauksena odotettavissa olevien tietojen tyyppi. Oletuksena jQuery määrittää sen itse.
Vaihtoehdot:
url - osoite, johon pyyntö lähetetään.
data - tiedot, jotka lähetetään palvelimelle kartta- (avain:arvojoukot) tai merkkijonomuodossa
success(data, textStatus, jqXHR) - toiminto, jota kutsutaan ajax-pyynnön onnistuneen suorittamisen yhteydessä.
dataType – palvelimelta odotettavissa olevien tietojen tyyppi. Oletusarvoisesti jQuery määrittää sen itse.
$.post() vastaa:
$.ajax((tyyppi: "POST", url: url, tiedot: tiedot, menestys: menestys, dataType: dataType ));
Onnistunut takaisinkutsutoiminto hyväksyy vastauksen palvelimelta, joka voi olla XML-, merkkijono-, JavaScript-tiedosto tai JSON-objekti vastauksen MIME-tyypistä riippuen. Tämä arvo sijoitetaan myös vastauksen tilaan.
Versiosta 1.5 lähtien onnistumissoittotoiminto hyväksyy jqXHR-objektin (aikaisemmissa versioissa XMLHttpRequest-objektin). Menetelmän klassinen käyttö:
$.post("ajax/test.html", function(data) ( $(.tulos").html(data); alert("Lataus valmis."); ));
Tämä koodi tekee pyynnön HTML-tiedostolle ja näyttää sen sisällön.
POST-pyynnön seurauksena vastaanotettuja sivuja ei tallenneta välimuistiin missään olosuhteissa.
jqXHR-objektiVersiosta 1.5 lähtien $.post() palauttaa jqXHR-objektin, joka toteuttaa viivästetyn rajapinnan, mikä mahdollistaa lisäkäsittelijöiden määrittämisen. Tavallisten viivästettävien objektimenetelmien .done(), .fail() ja .then() lisäksi, joita voidaan käyttää käsittelijöiden asentamiseen, jqXHR toteuttaa niiden kopiot: .success(), .error() ja .complete() . Tämä tehdään niiden menetelmien tavallisten nimien noudattamiseksi, joilla ajax-pyyntöjen suorittamiseen tarvittavat käsittelijät asennetaan.
// käynnistä ajax-pyyntö, asenna tapahtumakäsittelijät. // Tallennamme $.get-metodin palauttaman objektin muuttujaan jqxhr myöhempää käyttöä varten var jqxhr = $.post("example.php", function() ( alert("success"); )) .done( function() ( alert( "toinen menestys"); )).fail(function() ( alert("error"); )).always(function() ( alert("valmis"); )); // asenna toinen pyynnön viimeistelykäsittelijä jqxhr.always(function())( alert("toinen valmis"); ));
Huomautus vanhentuneista menetelmistä
jQuery 1.5:ssä esitellyt takaiskutoiminnot ovat vanhentuneet versiossa 1.8. jqXHR.success(), jqXHR.error() ja jqXHR.complete() tulisi nyt korvata jqXHR.done(), jqXHR.fail() ja jqXHR.always().
EsimerkkejäTee pyyntö test.php:lle jättämällä vastaus huomioimatta:
$.post("test.php");
Tee pyyntö test.php:lle, välitä tiedot, ohita vastaus:
$.post("test.php", ( nimi: "John", aika: "14pm" ));
Lähetä joukko tietoja palvelimelle jättämättä vastausta huomiotta:
$.post("test.php", ( "valinnat": ["Jon", "Susan"]));
Käsittele palvelimen vastaus (HTML tai XML riippuen siitä, mitä tuli):
$.post("test.php", function(data) ( alert("Data Loaded: " + data); ));
Tee pyyntö test.cgi:lle, lähetä tiedot, käsittele vastaus (HTML tai XML sen mukaan, mitä vastaanotettiin):
$.post("test.cgi", ( nimi: "John", aika: "14pm" )) .done(function(data) ( alert("Ladattu data: " + data); ));
Vastaanota vastaus palvelimelta JSON-muodossa ja näytä se sivulla ():
$.post("test.php", function(data) ( $("body").append("Nimi: " + data.nimi) // John .append("Aika: " + data.aika); / /14pm), "json");
Lomakkeen lähettäminen POST-pyynnöllä ja tuloksen näyttäminen div-osassa
$.ajax(( /* liitä lähetystapahtuma lomakkeeseen */ $("#searchForm").submit(function(event) ( /* poista vakiolomakkeen lähetys käytöstä */ event.preventDefault(); /* kerää tietoja sivuelementit : */ var $form = $(this), term = $form.find("input").val(), url = $form.attr("toiminta" /* lähettää tiedot POST-menetelmällä). */ var posting = $.post(url, ( s: term )); /* sijoita tulos div */ posting.done(function(data) ( var content = $(data).find("#content") "); $(" #tulos").empty(). append(content); )); ));
