Plusieurs méthodes de formulaire de soumission ajax dans Jquery (méthodes get et post)-js tutoriel-php.cn

Plusieurs méthodes de formulaire de soumission ajax dans Jquery (méthodes get et post)

高洛峰

Libérer： 2016-12-28 14:51:56

original

1867 Les gens l'ont consulté

Dans jquery, il existe des méthodes post et get pour le formulaire de soumission ajax. Lorsque nous utilisons la méthode get, nous pouvons directement utiliser ajax pour sérialiser le formulaire $(form ID) serialize();. méthode de formulaire de données. La méthode $get soumet la méthode get() du formulaire via HTTP distant. Ci-dessous, je présenterai deux méthodes pour soumettre les données du formulaire.

La méthode $get soumet le formulaire

La méthode get() charge les informations via une requête HTTP GET à distance

Format

$(selector).get(url,data,success(response,status,xhr),dataType)

Copier après la connexion

Test de demande Page web .php, transmettre 2 paramètres, ignorer la valeur de retour :

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

Copier après la connexion

Afficher la valeur de retour test.php (HTML ou XML, selon la valeur de retour) :

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

Copier après la connexion

séquence ajax Créez un formulaire virtuel

$.Form.serialize( NameValuePair )

Copier après la connexion

et définissez le nom et la valeur du contrôle de formulaire.

Paramètres

NameValuePair

Obligatoire. Configurez des contrôles de formulaire virtuel. Le format du paramètre est : { name1=value, name2=value2, ...}

Valeur de retour

La chaîne après sérialisation du formulaire virtuel, Le format est : username=Ah Cai&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; 
});

Copier après la connexion

Chaîne de requête standard de sortie :

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

$POST méthode pour soumettre le formulaire

$.post

jQuery.post( url, [data], [callback], [type] ) : Utilisez la méthode POST pour effectuer des requêtes asynchrones

Paramètres :

url (String) : Adresse URL pour envoyer la requête.
data (Map) : (Facultatif) Données à envoyer au serveur, en clés Clé/valeur Exprimé sous la forme de paires de valeurs.
callback (Fonction) : (facultatif) Fonction de rappel lorsque le chargement est réussi (cette méthode est appelée uniquement lorsque l'état de retour de la réponse est réussi).

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

Copier après la connexion

Modifiez le texte de l'élément div via la requête AJAX POST :

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

Copier après la connexion

Exemple

<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>

Copier après la connexion

Le contenu ci-dessus est partagé avec vous par l'éditeur de Script House Il existe plusieurs façons de soumettre un formulaire avec ajax dans Jquery (méthodes get et post, j'espère que cela sera utile à tout le monde).

Pour plus d'articles sur les méthodes de soumission de formulaires ajax dans Jquery (méthodes get et post), veuillez faire attention au site Web PHP chinois !