Heim > Backend-Entwicklung > PHP-Tutorial > javascript – Ein Problem bei der gemeinsamen Verwendung von Jquerys Ajax und PHP, um eine Formularübermittlung ohne Aktualisierung zu erreichen

javascript – Ein Problem bei der gemeinsamen Verwendung von Jquerys Ajax und PHP, um eine Formularübermittlung ohne Aktualisierung zu erreichen

WBOY
Freigeben: 2016-10-10 11:55:55
Original
1137 Leute haben es durchsucht

javascript – Ein Problem bei der gemeinsamen Verwendung von Jquerys Ajax und PHP, um eine Formularübermittlung ohne Aktualisierung zu erreichen

Das angezeigte Bild ist meine Seite. Der Hauptteil (schwarzes Feld links) wird angezeigt.
Die Unterseite wird über Ajax in der div#main_box angezeigt rechts)
Beim ersten Öffnen des Homepage-Links wird die Unterseite angezeigt, die geladen wird, wenn Sie auf die Schaltfläche

klicken

Jetzt habe ich ein Formular auf Unterseite 2, das geladen wird, wenn ich Taste 2 drücke. Ich muss das Formular absenden und dann den vom Formular übermittelten Wert über PHP abrufen, dann zur Datenbank gehen, um die Informationen abzufragen, und die zurückgeben Datenbankdaten und geben Sie sie auf dieser Unterseite aus. 2. Ich weiß nicht, wie ich das erreichen soll.

Nach langer Suche im Internet habe ich diese Methode gefunden:

<code><form action="teacher.php" method="post">
      <p>学期</p>
      <select name="xueqi" id="xueqi">
            <option value="201520161">2015-2016学年第一学期</option>
            <option value="201520162">2015-2016学年第二学期</option>
            <option value="201620171">2016-2017学年第一学期</option>
      </select>
</form>
<script>
$(function(){
$("#jiansuo").click(function(){
             var xueqi = $("#xueqi").val();//取得表单的值
             var one = $("#one").val();
             var one_week = $("#one_week").val();
             var more = $("#more").val();
             var more_week_num = $("#more_week_num").val();
             var more_week_ba = $("#more_week_ba").val();
             var xingqi = $("#xingqi").val();
             var banji = $("#banji").val();
            //Ajax post数据
            $.ajax({
             type: "POST",//Ajax请求为post
             url: "teacher.php?c=fankui",//ajax请求URL 脚本地址
             data: {"xueqi":xueqi,"one":one,"one_week":one_week,"more":more,"more_week_ba":more_week_ba,"xingqi":xingqi,"banji":banji}, //传递的值
             success:  function(data){  //回调函数 这里的data你可以返回HTML也可以是JSON 为了简单你返回HTML就可以了。
              $("#main_right_box").html("").html(data);//将返回的列表插入分类.
             }
            });
           });

}
</script>
</code>
Nach dem Login kopieren
Nach dem Login kopieren

Aber ich weiß nicht, wie ich es verwenden soll, bitte geben Sie mir einen Rat

Antwortinhalt:

javascript – Ein Problem bei der gemeinsamen Verwendung von Jquerys Ajax und PHP, um eine Formularübermittlung ohne Aktualisierung zu erreichen

Das angezeigte Bild ist meine Seite. Der Hauptteil (schwarzes Feld links) wird angezeigt.
Die Unterseite wird über Ajax in der div#main_box angezeigt rechts)
Beim ersten Öffnen des Homepage-Links wird die Unterseite angezeigt, die geladen wird, wenn Sie auf die Schaltfläche

klicken

Jetzt habe ich ein Formular auf Unterseite 2, das geladen wird, wenn ich Taste 2 drücke. Ich muss das Formular absenden und dann den vom Formular übermittelten Wert über PHP abrufen, dann zur Datenbank gehen, um die Informationen abzufragen, und die zurückgeben Datenbankdaten und geben Sie sie auf dieser Unterseite aus. 2. Ich weiß nicht, wie ich das erreichen soll.

Nach langer Suche im Internet habe ich diese Methode gefunden:

<code><form action="teacher.php" method="post">
      <p>学期</p>
      <select name="xueqi" id="xueqi">
            <option value="201520161">2015-2016学年第一学期</option>
            <option value="201520162">2015-2016学年第二学期</option>
            <option value="201620171">2016-2017学年第一学期</option>
      </select>
</form>
<script>
$(function(){
$("#jiansuo").click(function(){
             var xueqi = $("#xueqi").val();//取得表单的值
             var one = $("#one").val();
             var one_week = $("#one_week").val();
             var more = $("#more").val();
             var more_week_num = $("#more_week_num").val();
             var more_week_ba = $("#more_week_ba").val();
             var xingqi = $("#xingqi").val();
             var banji = $("#banji").val();
            //Ajax post数据
            $.ajax({
             type: "POST",//Ajax请求为post
             url: "teacher.php?c=fankui",//ajax请求URL 脚本地址
             data: {"xueqi":xueqi,"one":one,"one_week":one_week,"more":more,"more_week_ba":more_week_ba,"xingqi":xingqi,"banji":banji}, //传递的值
             success:  function(data){  //回调函数 这里的data你可以返回HTML也可以是JSON 为了简单你返回HTML就可以了。
              $("#main_right_box").html("").html(data);//将返回的列表插入分类.
             }
            });
           });

}
</script>
</code>
Nach dem Login kopieren
Nach dem Login kopieren

Aber ich weiß nicht, wie ich es verwenden soll, bitte geben Sie mir einen Rat

  1. Verwenden Sie die iframe-Funktion. Das Element der zweiten Schaltfläche ist ein A-Tag. Zeigen Sie es als gewünschte Schaltfläche an und fügen Sie das Zielattribut hinzu, sodass Ihre zweite Anforderung auf natürliche Weise gelöst wird.

    <code>  <a href="相应的url" target="main_box_frame">按钮二</a>
      <div id="main_box"><iframe name="main_box_frame"></iframe></div></code>
    Nach dem Login kopieren
  2. Fügen Sie ein Klickereignis zur zweiten Schaltflächenbeschriftung hinzu, rufen Sie den in der main_box anzuzeigenden Inhalt über Ajax ab, fügen Sie ihn zur main_box hinzu, verknüpfen Sie ihn dann mit dem Submit-Ereignis im abgerufenen Formular und senden Sie ihn ab form Holen Sie sich die Antwort und fügen Sie sie in main_box ein.

Mein Ansatz besteht darin, das Standardübermittlungsereignis zu deaktivieren, jqs Ajax zum Senden der Anfrage zu verwenden und data:
$(formSelector).serialize() für die Formulardaten zu verwenden. Es besteht keine Notwendigkeit, den Wert separat zu lesen , und die Seite wird über die Rückruffunktion aktualisiert.

Ich weiß das, sagen wir mal so: Was Ajax zurückgibt, ist tatsächlich das, was in Ihrer teacher.php gedruckt wird. Nehmen wir als Beispiel das dataType-Format als HTML, können Sie einen Test in dieser teacher.php durchführen und direkt echoen '< h1>Hallo, ich möchte zurückgesendet werden ', und dann erfolgt die Rückgabe bei folgendem Erfolg:function(data){alert(data)};//Sehen Sie, was es ist, wenn es so ist json, dann teacher Die einzigen Daten, die .php ausgeben kann, sind echo json encode($array); hier ist dataType:'json'
//Ich weiß nicht, ob ich einen Fehler gemacht habe= =#
/ /Übrigens, Sie haben dieses Formular noch? Sie müssen onsubmit='return checnkForm()';

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