Heim > Web-Frontend > js-Tutorial > Mehrere Methoden des Ajax-Übermittlungsformulars in Jquery (Get- und Post-Methoden)

Mehrere Methoden des Ajax-Übermittlungsformulars in Jquery (Get- und Post-Methoden)

高洛峰
Freigeben: 2016-12-28 14:51:56
Original
1866 Leute haben es durchsucht

In jquery gibt es Post- und Get-Methoden für das Ajax-Übermittlungsformular. Wenn wir die Get-Methode verwenden, können wir Ajax direkt verwenden, um das Formular $(form ID) serialize(); zu serialisieren Formulardaten. Die $get-Methode sendet die get()-Formularmethode über Remote-HTTP. Im Folgenden werde ich zwei Methoden zum Senden von Formulardaten vorstellen.

$get-Methode sendet das Formular

get()-Methode lädt Informationen über eine Remote-HTTP-GET-Anfrage

Format

$(selector).get(url,data,success(response,status,xhr),dataType)
Nach dem Login kopieren

Test anfordern .php-Webseite, 2 Parameter übertragen, Rückgabewert ignorieren:

$.get("test.php", { name: "John", time: "2pm" } );
Nach dem Login kopieren

Test.php-Rückgabewert anzeigen (HTML oder XML, abhängig vom Rückgabewert):

$.get("test.php", function(data){
 alert("Data Loaded: " + data);
});
Nach dem Login kopieren

Ajax-Sequenz Erstellen Sie ein virtuelles Formular

$.Form.serialize( NameValuePair )
Nach dem Login kopieren

und legen Sie den Namen und den Wert des Formularsteuerelements fest.

Parameter

NameValuePair

Erforderlich. Richten Sie virtuelle Formularsteuerelemente ein. Das Parameterformat ist: { name1=value, name2=value2, ...}

Return value

Die Zeichenfolge nach der Serialisierung des virtuellen Formulars. Das Format ist : username=%E5%95%8A%E8%94%A1&password=123456

<form> 
<div><inputtype="text"name="a"value="1"id="a"/></div> 
<div><inputtype="text"name="b"value="2"id="b"/></div> 
<div><inputtype="hidden"name="c"value="3"id="c"/></div> 
<div> 
<textareaname="d"rows="8"cols="40">4</textarea> 
</div> 
<div><selectname="e"> 
<optionvalue="5"selected="selected">5</option> 
<optionvalue="6">6</option> 
<optionvalue="7">7</option> 
</select></div> 
<div> 
<inputtype="checkbox"name="f"value="8"id="f"/> 
</div> 
<div> 
<inputtype="submit"name="g"value="Submit"id="g"/> 
</div> 
</form> 
.serialize() 方法可以操作已选取个别表单元素的 jQuery 对象,比如 <input>, <textarea> 以及 <select>。不过源码天空,选择 <form> 标签本身进行序列化一般更容易些: 
$(&#39;form&#39;).submit(function(){ 
alert($(this).serialize()); 
returnfalse; 
});
Nach dem Login kopieren

Standardabfragezeichenfolge ausgeben:

a=1&b;=2&c;= 3&d;=4&e; =5

$POST-Methode zum Senden des Formulars

$.post

jQuery.post( url, [data], [callback], [type] ): Verwendung POST-Methode zum Senden asynchroner Anfragen

Parameter:

URL (String): URL-Adresse zum Senden der Anfrage
Daten (Map): (Optional) Zum Senden an den Server Daten werden in Form von Schlüssel/Wert-Paaren ausgedrückt.
Rückruf (Funktion): (optional) Rückruffunktion, wenn das Laden erfolgreich ist (diese Methode wird nur aufgerufen, wenn der Rückgabestatus der Antwort erfolgreich ist).

$.post("momsg.php",{"tel":$("#username").val()},function(data){
if(data==0)//0 成功 1 不成功 2 手机号码格式不对
  {   
   //  
  }  
});
Nach dem Login kopieren

Ändern Sie den Text des div-Elements über eine AJAX-POST-Anfrage:

$("input").keyup(function(){
 txt=$("input").val();
 $.post("demo_ajax_gethint.asp",{suggest:txt},function(result){
  $("span").html(result);
 });
});
Nach dem Login kopieren

Beispiel

<script type="text/javascript">
function adddata()
  {
   var typeName=$("#<%=this.typeName.ClientID%>").val();
   var msg=" not be empty";
   if(typeName=="")
   {
    if(msg!="")
     {
      alert(msg);
      return false;
     }
   }
   else
   {
     //显示进度条
     $("#loading").ajaxStart(function(){
     $(this).show();
     });
     //提交前触发的事件
     $("#msg").ajaxSend(function(request, settings){$(this).append("<li>Starting request at " + settings.url + "</li>");});
     //这里的countryid 可以动态从GridView里面取
     var countryid= $("#<%=this.drpCountry.ClientID%>").val();//获取下拉菜单值
     var countryname=format_get_name(countryid);//获取下拉菜单文本
     var typeName = $("#<%=this.typeName.ClientID%>").val();//获取txt为typeName的值
     var showTypeDesc = $("#<%=this.showTypeDesc.ClientID%>").val();//获取txt为showTypeDesc的值
      //调用Juqery Ajax
      $.ajax({
      type: "POST",
      url: "addNews.aspx",
      timeout: 20000,
      error: function(){alert(&#39;error&#39;);},
      data: "countryid="+countryid+"&countryname="+countryname+"&typeName="+typeName+"&showTypeDesc="+showTypeDesc,
      success: function(msg)
      {
      var text=msg.split(&#39;<&#39;);
      //当AJAX请求失败时添加一个被执行的方法
      $("#msg").ajaxError(function(request, settings){
      $(this).append("<li>Error requesting page " + settings.url + "</li>");
      });
      //当AJAX请求成功时添加一个被执行的方法
      $("#msg").ajaxSuccess(function(request, settings){
      $(this).append(text[0]);
      });
     //清空文本里面的值
      $("#<%=this.typeName.ClientID%>").val("");
      $("#<%=this.showTypeDesc.ClientID%>").val("");
      return false;
      }
      });
   }
  }
  //获取下拉菜单里面的文本内容
  function format_get_name(id)
  {
    var drp = $(&#39;<%=drpCountry.ClientID%>&#39;);
    for ( var i =0;i<drp.options.length;i++)
    {
      if ( drp.options[i].value == id )
      {
        return drp.options[i].text;
      }
    }
    return &#39;&#39;;
  }
</script>
Nach dem Login kopieren

Der obige Inhalt wird vom Herausgeber mit Ihnen geteilt von Script House Es gibt mehrere Möglichkeiten, ein Formular mit Ajax in Jquery einzureichen (get- und post-Methoden). Ich hoffe, dass es für alle hilfreich ist.

Weitere verwandte Artikel zu verschiedenen Methoden des Ajax-Übermittlungsformulars in Jquery (Get- und Post-Methoden) finden Sie auf der chinesischen PHP-Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage