masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > Jquery ajax tutorial_jquery asas

Jquery ajax tutorial_jquery asas

WBOY
Lepaskan： 2016-05-16 15:30:52
asal
1316 orang telah melayarinya

Ajax jQuery membawa revolusi halaman web yang tidak memerlukan penyegaran semula. Berikut ialah pengenalan terperinci kepada operasi Ajax yang terlibat dalam jQuery. (Tiada arahan khas diperlukan, konfigurasi pelayan diperlukan. Saya menggunakan Tomcat 7 di sini)

1. Muatkan data fail berdasarkan permintaan

Permintaan di sini biasanya adalah operasi tertentu pada halaman web, seperti klik, dsb.

Jenis data yang dimuatkan dikelaskan kepada empat jenis berikut: a. Memuatkan fail JSON;

Empat kaedah pemuatan yang sepadan ialah: muat, getJSON, getScript, get.

a. Muatkan fail HTML

Muat fail HTML bertulis ke dalam halaman web. Contohnya: 

//load方法加载html文件 
$('#letter-a a').click(function(){ 
    $('#dictionary').load('a.html'); 
    return false; 
});
Salin selepas log masuk

Di sini a.html juga merupakan fail halaman pratulis yang diletakkan di sebelah pelayan Pemuatan secara langsung akan membolehkan kandungan HTML dimuatkan ke dalam sasaran yang dipadankan.

b. Muatkan fail JSON

Muat fail JSON yang disediakan ke dalam halaman web. Contohnya: 

//加载json文件 
$('#letter-b a').click(function(){ 
  $.getJSON('b.json',function(data){ 
    var html = ''; 
    $.each(data,function(entryIndex, entry){ 
      html += "<div class='entry'>"; 
      html += "<h3 class='term'>" + entry.term + "</h3>"; 
      html += "<div class='part'>" + entry.part + "</div>"; 
      html += "<div class='definition'>"; 
      html += entry.definition; 
      if(entry.quote){ 
        html += '<div class="quote">'; 
        $.each(entry.quote, function(lineIndex, line){ 
          html += '<div class="quote-line">' + line + '</div>'; 
        }); 
        if(entry.author){ 
          html += '<div class="quote-author">' + entry.author + '</div>'; 
        } 
      } 
      html += "</div>"; 
      html += "</div>"; 
    }); 
    $('#dictionary').html(html); 
  }); 
  return false;  
});
Salin selepas log masuk

Parameter pertama kaedah getJSON merujuk kepada laluan fail yang dimuatkan dan parameter kedua ialah fungsi panggil balik selepas pemuatan selesai. Melalui fungsi panggil balik ini, anda boleh mengendalikan data yang dimuatkan. Bahagian berulang diproses menggunakan setiap gelung. Akhir sekali, gunakan kaedah html untuk menambah rentetan html yang dipasang pada elemen dengan sasaran id=kamus.

c. Muatkan fail Javascript

Memuatkan fail Javascript adalah serupa dengan memuatkan fail HTML. Apa yang perlu diperhatikan di sini ialah Javascript yang dimuatkan menggunakan kaedah getScript akan dijalankan terus mengikut persekitaran Javascript semasa. Contohnya: 

//执行脚本 
$('#letter-c a').click(function(){ 
    $.getScript('c.js'); 
    return false; 
});
Salin selepas log masuk

d. Muatkan fail XML

Anda boleh menggunakan kaedah get untuk memuatkan fail XML dalam jQuery. Contohnya: 

//加载XML文档 
$('#letter-d a').click(function(){ 
    $.get('d.xml',function(data){ 
      $('#dictionary').empty(); 
      $(data).find('entry').each(function(){ 
        var $entry = $(this); 
        var html = '<div class="entry">'; 
        html += '<h3 class="term">' + $entry.attr('term') + '</h3>'; 
        html += '<div class="part">' + $entry.attr('part') + '</div>'; 
        html += '<div class="definition">'; 
        html += $entry.find('definition').text(); 
        var $quote = $entry.find('quote'); 
        if($quote.length) 
        { 
          html += '<div class="quote">'; 
          $quote.find('line').each(function(){ 
            html += '<div class="quote-line">'; 
            html += $(this).text() + '</div>'; 
          }); 
          if($quote.attr('author')){ 
            html += '<div class="quote-author">'; 
            html += $quote.attr('author') + '</div>'; 
          } 
          html += '</div>'; 
        } 
        html += '</div>'; 
        html += '</div>'; 
        $('#dictionary').append($(html)); 
      }); 
    }); 
    return false; 
});
Salin selepas log masuk

Satu ciri fail XML ialah anda boleh mengendalikan elemen XML seperti anda menggunakan jQuery untuk mengendalikan HTML. Seperti menggunakan kaedah attr, kaedah teks, dll.

2 Dapatkan data daripada pelayan berdasarkan kaedah Dapatkan

Contoh sebelumnya semua fail data yang diperoleh secara statik daripada pelayan. Nilai Ajax tidak terhad kepada ini. Ia secara dinamik memperoleh data daripada pelayan melalui kaedah get, yang memberikan bantuan besar untuk merealisasikan halaman web tanpa menyegarkan.

Seterusnya, gunakan kaedah get untuk mendapatkan sekeping data yang diperlukan daripada pelayan. Di sini, saya membina bahagian pelayan dengan menggabungkan rangka kerja Struts2 J2EE dan TOMCAT. Bahagian pelayan khusus adalah pelbagai, ia boleh menjadi php apache atau apa-apa lagi.

Operasi adalah seperti berikut Apabila pengguna mengklik Eavesdrop, kaedah dapatkan dihantar ke pelayan, data Eavesdrop diperoleh dan nilai json dikembalikan, yang kemudiannya dipasang dalam jQuery.

Kod adalah seperti berikut: 

//GET方法加载服务器内容 
$('#letter-e a').click(function(){ 
    var requestData = {term:$(this).text().toUpperCase()}; 
    $.get('EGet.action', requestData, function(data){       
      //返回的数据包结构根据Struts2配置如下： 
      //{"resultMSG":"{ 内部另一个json结构 }","success":"true"} 
      //先将返回的数据包拆包 
      var responseObj = eval("("+data+")"); 
      if(responseObj.success == 'true') 
      { 
        $('#dictionary').empty(); 
        //返回成功，接下来再次解包resultMSG 
        var dataObj = eval("("+responseObj.resultMSG+")"); 
        var html = ""; 
        html += "<div class='entry'>"; 
        html += "<h3 class='term'>" + dataObj.term + "</h3>"; 
        html += "<div class='part'>" + dataObj.part + "</div>"; 
        html += "<div class='definition'>"; 
        html += dataObj.definition; 
        if(dataObj.quote){ 
          html += '<div class="quote">'; 
          $.each(dataObj.quote, function(lineIndex, line){ 
            html += '<div class="quote-line">' + line + '</div>'; 
          }); 
          if(dataObj.author){ 
            html += '<div class="quote-author">' + dataObj.author + '</div>'; 
          } 
        } 
        html += "</div>"; 
        html += "</div>"; 
        $('#dictionary').html(html); 
      } 
      else 
      { 
        var $warning = $('<div>Sorry, your term was not found!</div>'); 
        $('#dictionary').html($warning); 
      } 
    }); 
    return false; 
});
Salin selepas log masuk

Apa yang perlu dijelaskan di sini ialah disebabkan konfigurasi struts2, apabila kembali, terdapat satu lagi lapisan pembungkusan sebagai tambahan kepada data yang diperlukan, iaitu hasilMSG yang digunakan untuk mewakili kandungan hasil dan medan kejayaan sama ada akses ajax adalah berjaya. Jadi dua pembongkaran eval digunakan.

Apa yang dilalui oleh program Java latar belakang saya di sini bukanlah HTML yang dikonfigurasikan, tetapi hanya data jenis json yang saya fikir menulis dan menghantar HTML pada tahap Java tidak semudah menghantar data secara langsung, dan ia tidak begitu mudah untuk diubah suai. gaya atau struktur halaman pada masa hadapan adalah mudah untuk mengubah suai javascript secara langsung.

Mendapatkan data pelayan melalui kaedah get adalah sama dengan menyerahkan permintaan berikut kepada pelayan: EGet.action?term=XXX

Kod fail latar belakang java dikeluarkan di bawah:

1.EGet.java

package lhb; 
import com.opensymphony.xwork2.ActionSupport; 
public class EGet extends ActionSupport 
{ 
  private String term; 
  private Terms sampleTerm; 
  private String success; 
  private String resultMSG; 
  /** 
   * 
   */ 
  private static final long serialVersionUID = 1L; 
  public String execute() throws Exception 
  { 
    initData(); 
    if(term.equals(sampleTerm.getTerm())) 
    { 
      success = "true"; 
      resultMSG = "{\"term\": \""+sampleTerm.getTerm()+"\","+ 
          "\"part\": \""+sampleTerm.getPart()+"\","+ 
          "\"definition\": \""+sampleTerm.getDefinition()+"\","+ 
          "\"quote\": ["+ 
          "\"Is public worship, then, a sin,\","+ 
          "\"That for devotions paid to Bacchus\","+ 
          "\"The lictors dare to run us in,\","+ 
          "\"And resolutely thump and whack us&#63;\""+ 
          "],"+ 
          "\"author\": \""+sampleTerm.getAuthor()+"\"}"; 
    } 
    else{ 
      success = "false"; 
      resultMSG = "fail"; 
    } 
    return SUCCESS; 
  } 
  //初始化数据 
  private void initData() 
  { 
    String partEAVESDROP = "v.i."; 
    String definitionEAVESDROP = "Secretly to overhear a catalogue of the crimes and vices of another or yourself."; 
    String quoteEAVESDROP[] = {"A lady with one of her ears applied", 
        "To an open keyhole heard, inside,", 
        "Two female gossips in converse free —", 
        "The subject engaging them was she.", 
        "\"I think,\" said one, \"and my husband thinks", 
        "That she's a prying, inquisitive minx!\"", 
        "As soon as no more of it she could hear", 
        "The lady, indignant, removed her ear.", 
        "\"I will not stay,\" she said, with a pout,", 
        "\"To hear my character lied about!\""}; 
    String authorEAVESDROP = "Gopete Sherany"; 
    Terms EAVESDROP = new Terms(); 
    EAVESDROP.setTerm("EAVESDROP"); 
    EAVESDROP.setPart(partEAVESDROP); 
    EAVESDROP.setDefinition(definitionEAVESDROP); 
    EAVESDROP.setQuote(quoteEAVESDROP); 
    EAVESDROP.setAuthor(authorEAVESDROP); 
    sampleTerm = EAVESDROP; 
  } 
  public String getTerm() 
  { 
    return term; 
  } 
  public void setTerm(String term) 
  { 
    this.term = term; 
  } 
  public String getSuccess() 
  { 
    return success; 
  } 
  public void setSuccess(String success) 
  { 
    this.success = success; 
  } 
  public String getResultMSG() 
  { 
    return resultMSG; 
  } 
  public void setResultMSG(String resultMSG) 
  { 
    this.resultMSG = resultMSG; 
  } 
}
Salin selepas log masuk

Data dalam tindakan ini dikonfigurasikan secara langsung oleh saya sendiri, dan ia hanya digunakan sebagai tunjuk cara di sini. Data sebenar biasanya disimpan dalam pangkalan data dalam projek. Oleh kerana ini adalah contoh kecil jQuery, saya tidak akan menghadapi terlalu banyak masalah.

2.Terms.java

package lhb; 
public class Terms 
{ 
  private String term; 
  private String part; 
  private String definition; 
  private String quote[]; 
  private String author; 
  public String getTerm() 
  { 
    return term; 
  } 
  public void setTerm(String term) 
  { 
    this.term = term; 
  } 
  public String getPart() 
  { 
    return part; 
  } 
  public void setPart(String part) 
  { 
    this.part = part; 
  } 
  public String getDefinition() 
  { 
    return definition; 
  } 
  public void setDefinition(String definition) 
  { 
    this.definition = definition; 
  } 
  public String[] getQuote() 
  { 
    return quote; 
  } 
  public void setQuote(String[] quote) 
  { 
    this.quote = quote; 
  } 
  public String getAuthor() 
  { 
    return author; 
  } 
  public void setAuthor(String author) 
  { 
    this.author = author; 
  } 
}
Salin selepas log masuk

Kelas ini adalah kelas pojo semata-mata. Tiada kaedah khas.

3.struts.xml

Ini ialah kaedah json struts2 untuk memindahkan konfigurasi

<&#63;xml version="1.0" encoding="UTF-8"&#63;> 
<!DOCTYPE struts PUBLIC 
  "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" 
  "http://struts.apache.org/dtds/struts-2.3.dtd"> 
<struts> 
  <!-- 指定全局国际化资源文件 --> 
  <constant name="struts.custom.i18n.resources" value="i18n"/> 
  <!-- 指定国际化编码所使用的字符集 --> 
  <constant name="struts.i18n.encoding" value="GBK"/> 
  <!-- JSON的action --> 
  <package name="jsonInfo" extends="json-default"> 
    <action name="EGet" class="lhb.EGet"> 
      <result type="json"> 
        <param name="contentType">text/html</param> 
        <param name="includeProperties">success, resultMSG</param> 
      </result> 
    </action> 
  </package> 
</struts>
Salin selepas log masuk

Di sini anda boleh melihat json lapisan luar, kejayaan dan resultMSG dikonfigurasikan dalam includeProperties. Ini berfungsi dengan baik dalam amalan. Jika nilai yang diperlukan tidak diperoleh daripada pelayan, walaupun akses ajax berjaya, hasil yang diperoleh tidak dianggap berjaya kerana nilai yang diperlukan tidak diperolehi. Tanda kejayaan ditambah di sini untuk memudahkan operasi jQuery bahagian hadapan.

Mendapatkan data pelayan berdasarkan kaedah lain pada asasnya sama seperti mendapatkan dari segi penulisan, seperti kaedah pos dan kaedah beban. Saya tidak akan pergi ke butiran di sini.

3 Serahkan borang

secara dinamik

Dengan sokongan AJAX jQuery, kami boleh menyerahkan borang secara dinamik dengan mudah tanpa memuat semula halaman.

Sebagai contoh di bawah: 

$('#letter-f form').submit(function(){ 
    //调用preventDefault方法阻止事件冒泡，具体工作就是如果网页有脚本错误，那么则会阻止提交form表单 
    event.preventDefault(); 
    var formValues = $('input[id="term"]').val(); 
    var requestStr = {'term':formValues.toUpperCase()}; 
    $.get('EGet.action', requestStr, function(data){ 
      var responseObj = $.parseJSON(data); 
      if(responseObj.success == 'true') 
      { 
        var html = ''; 
        var dataObj = $.parseJSON(responseObj.resultMSG); 
        html += "<div class='entry'>"; 
        html += "<h3 class='term'>" + dataObj.term + "</h3>"; 
        html += "<div class='part'>" + dataObj.part + "</div>"; 
        html += "<div class='definition'>"; 
        html += dataObj.definition; 
        if(dataObj.quote){ 
          html += '<div class="quote">'; 
          $.each(dataObj.quote, function(lineIndex, line){ 
            html += '<div class="quote-line">' + line + '</div>'; 
          }); 
          if(dataObj.author){ 
            html += '<div class="quote-author">' + dataObj.author + '</div>'; 
          } 
        } 
        html += "</div>"; 
        html += "</div>"; 
        $('#dictionary').html(html); 
      } 
      else{ 
        var warning = $('Sorry, your term was not found!'); 
        $('#dictionary').html(warning); 
      } 
    }); 
});
Salin selepas log masuk

这个例子援引的数据还是上一个EGet.action所用的那个数据。程序的操作过程基本是：

首先调用这个 preventDefault();这个方法在注释里也说明了，用于阻止事件冒泡带来的不便与麻烦。

接下来通过$()获得input的元素，使用val方法获得其值，接下来的使用方法与上例基本相同。

这里也可以使用serialize方法将input元素序列化成如下格式“term=xxx”这样。不过由于服务器端的java程序中的那些数据时硬编码的，所有，不是太方便用，就没用。

4.关于Ajax的观察员函数

jQuery包含了2个全局的ajax观察员函数：ajaxStart和ajaxStop。

分别在执行ajax操作的起始和结束时调用。例如：

//ajax的观察员函数 ajaxStart 和 ajaxStop 
  $('<div id="loading">Loading...</div>').insertBefore('#dictionary') 
    .ajaxStart(function(){ 
      $(this).show(); 
    }).ajaxStop(function(){ 
      $(this).hide(); 
    });
Salin selepas log masuk

这里无论哪个a标签触发ajax操作，包括静态载入文件和动态服务器访问，都会触发ajaxStart和ajaxStop。
关于错误处理，常用的三个函数：success、complete、error。

下面以error为例：

.error(function(jqXHR){ 
  $('#dictionary').html('An Error occurred:'+ jqXHR.status).append(jqXHR.responseText); 
});
Salin selepas log masuk

可以以连缀的写法将error方法放置于get方法之后：“$.get().error()”这样。
刚才看了一下，这个可以将Tomcat的报错，加载到页面之上。这在有的时候还是很有用的。如图：

不过不知道为何这个将我原有样式也覆盖了一些，如果有哪位网友知道，麻烦指正一下问题所在。谢谢了。

5.Ajax和事件

Ajax动态访问服务器以后生成的元素，如果想绑定事件的话，一种方法是每次取到都重新绑定处理程序，这种相对来说比较简单，但是不适合DOM结构经常变化的场景。如果DOM结构经常变化，那么就需要用live方法，实现事件委托。

live用法与bind一样。

关于jquery ajax基础教程今天小编就给大家介绍到这里，后续还会持续给大家介绍，希望大家继续关注脚本之家网站，有你们的关注我们会做的更好，谢谢！

Label berkaitan：
jquery_ajax教程 jquery_ajax实例教程
sumber：php.cn
Artikel sebelumnya：jQuery-1.9.1 Siri Analisis Kod Sumber (10) Pembungkusan Acara Sistem Peristiwa_jquery Artikel seterusnya：Ringkasan kemahiran pengoptimuman prestasi JavaScript knowledge_javascript
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Penapis ungkapan biasa untuk kotak carian dan kotak semak tindanan MERN Saya cuba memahami cara tindanan MERN berfungsi bersama-sama dengan belajar dengan melakuk...
daripada 2024-04-06 14:53:12
0
1
425
Isu pemasangan Prestashop: Tidak dapat memasang modul tersuai Saya baru dalam pembangunan modul Prestashop. Saya cuba membina modul prestashop pertama A...
daripada 2024-04-03 19:24:44
0
1
402
Tutorial PHP: Bagaimana untuk memuat naik teks dan imej ke Linkedin menggunakan PHP? Saya cuba memuat naik teks, imej dan pautan menggunakan LinkedinsRestAPI (https://learn.mi...
daripada 2024-04-03 18:42:29
0
1
420
Tidak dapat menerima maklumat daripada pangkalan data mySQL saya walaupun telah melihat tutorial melakukan perkara yang sama Jadi saya cuba membuat program yang membaca dan menulis ke pangkalan data MySQL, yang memb...
daripada 2024-04-03 14:46:04
0
1
298
Apakah lapisan seni bina bagi aplikasi Spring Boot + React + MySQL? Saya cuba menulis dokumentasi tentang aplikasi tetapi saya keliru bagaimana untuk menerang...
daripada 2024-04-03 10:07:06
0
1
410
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan