jQuery ajax serahkan contoh borang Borang (dengan kod sumber demo)_jquery

Contoh dalam artikel ini menerangkan kaedah ajax jQuery untuk menyerahkan borang Borang. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Kaedah $.ajax Jquery boleh melaksanakan panggilan ajax dan menetapkan url, siaran, parameter, dsb.

Jika anda perlu menulis banyak kod untuk menyerahkan Borang sedia ada, apa kata anda hanya memindahkan penyerahan Borang terus ke ajax.

Kaedah pengendalian sebelumnya

Contohnya, kod Borang adalah seperti berikut:

<form id="Form1" action="action.aspx" method="post" >
名称：<input name="name" type="text" /><br />
密码：<input name="password" type="password" /><br />
手机：<input name="mobile" type="text" /><br />
说明：<input name="memo" type="text" /><br />
<input type="submit" value="提 交" />
</form>

Apabila diserahkan, ia akan melompat ke halaman action.aspx. Dan nilai boleh diperolehi melalui Request.Params["name"].

Berfikir

Jika anda tidak mahu memuat semula halaman menggunakan ajax, anda perlu menentukan url dan maklumat lain dalam $.ajax, yang sukar untuk dikekalkan.

Saya menyemak dalam talian dan mendapati bahawa orang asing mempunyai penyelesaian sejak dahulu lagi. Gunakan ajax untuk menyerahkan terus mengikut maklumat Borang. Tidak menyegarkan halaman.

Rujukan: http://jquery.malsup.com/form/

Ia sangat berguna, tetapi saya masih ingin menulis satu untuk diri saya sendiri.

Kod JS Teras

//将form转为AJAX提交
function ajaxSubmit(frm, fn) {
  var dataPara = getFormJson(frm);
  $.ajax({
    url: frm.action,
    type: frm.method,
    data: dataPara,
    success: fn
  });
}
//将form中的值转换为键值对。
function getFormJson(frm) {
  var o = {};
  var a = $(frm).serializeArray();
  $.each(a, function () {
    if (o[this.name] !== undefined) {
      if (!o[this.name].push) {
        o[this.name] = [o[this.name]];
      }
      o[this.name].push(this.value || '');
    } else {
      o[this.name] = this.value || '';
    }
  });
  return o;
}

Parameter pertama kaedah ajaxSubmit ialah borang yang akan diserahkan dan parameter kedua ialah fungsi pemprosesan selepas panggilan ajax berjaya.

Hantar tindakan borang ke url ajax, kaedah borang kepada jenis ajax, dan kemudian hantar kandungan borang terformat kepada data.

Kaedah getFormJson menukar elemen borang kepada pasangan nilai kunci format json. Dalam bentuk: {name:'aaa',password:'tttt'}, berhati-hati untuk meletakkan yang mempunyai nama yang sama dalam tatasusunan.

panggilan

//调用
$(document).ready(function(){
  $('#Form1').bind('submit', function(){
    ajaxSubmit(this, function(data){
      alert(data);
    });
    return false;
  });
});

Sebelum memanggil kaedah ajaxSubmit, anda boleh mengesahkan sama ada data itu betul Pada makluman(data), anda boleh menambah kod pasca pemprosesan panggilan anda sendiri.

Selepas memanggil kaedah ajaxSubmit, anda mesti menambah pernyataan palsu untuk mengelakkan Borang daripada diserahkan.

Klik di sini untuk kod contoh lengkapMuat turun dari tapak ini.

Pembaca yang berminat dengan lebih banyak kandungan berkaitan jQuery boleh menyemak topik khas tapak ini: "Ringkasan penggunaan Ajax dalam jquery", "Ringkasan kemahiran operasi jadual (jadual) jQuery ", "Kesan Khas dan Ringkasan Kemahiran JQuery Drag and Drop", "Ringkasan Kemahiran Sambungan jQuery", "Ringkasan Kesan Khas Klasik Biasa jQuery" , "Animasi jQuery dan Ringkasan penggunaan kesan khas", "ringkasan penggunaan pemilih jquery" dan "pemalam dan ringkasan penggunaan jQuery"

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.