Implementierung einer HTML-basierten Implementierung ohne Aktualisierung der Seite nach der Formularübermittlung-HTML-Tutorial-php.cn

Heim

Web-Frontend

HTML-Tutorial

Implementierung einer HTML-basierten Implementierung ohne Aktualisierung der Seite nach der Formularübermittlung

Jun 05, 2018 pm 02:18 PM

Die Verwendung von Ajax zur Implementierung der Formularübermittlung ohne Aktualisierung der Seite wird häufig in Projekten verwendet. Vor einiger Zeit habe ich von meinem Master mehrere andere Methoden zum Senden von Formularen ohne Aktualisierung gelernt, die hauptsächlich auf dem Iframe-Framework basieren. Jetzt hat der Herausgeber die Skript-Home-Plattform als Referenz zusammengestellt und freigegeben

In Projekten wird häufig die Verwendung von Ajax zum Implementieren der Formularübermittlung ohne Aktualisierung der Seite verwendet. Vor einiger Zeit habe ich von meinem Master mehrere andere Methoden zum Senden von Formularen ohne Aktualisierung gelernt, die hauptsächlich auf dem Iframe-Framework basieren. Jetzt habe ich es geklärt und mit allen geteilt.
Erster Typ:
(HTML-Seite)

HTML-CodeInhalt in die Zwischenablage kopieren

&lt;!DOCTYPE HTML&gt;    
&lt;html lang=&quot;en-US&quot;&gt;    
&lt;head&gt;    
&lt;meta charset=&quot;utf-8&quot;&gt;    
&lt;title&gt;无刷新提交表单&lt;/title&gt;    
&lt;style type=&quot;text/css&quot;&gt;    
ul{ list-style-type:none;}    
&lt;/style&gt;    
&lt;/head&gt;    
&lt;body&gt;    
&lt;iframe name=&quot;formsubmit&quot; style=&quot;display:none;&quot;&gt;    
&lt;/iframe&gt;    
&lt;!-- 将form表单提交的窗口指向隐藏的ifrmae,并通过ifrmae提交数据。 --&gt;    
&lt;form action=&quot;form.php&quot; method=&quot;POST&quot; name=&quot;formphp&quot; target=&quot;formsubmit&quot;&gt;    
&lt;ul&gt;    
&lt;li&gt;    
&lt;label for=&quot;uname&quot;&gt;用户名：&lt;/label&gt;    
&lt;input type=&quot;text&quot; name=&quot;uname&quot; id=&quot;uname&quot; /&gt;    
&lt;/li&gt;    
&lt;li&gt;    
&lt;label for=&quot;pwd&quot;&gt;密 码：&lt;/label&gt;    
&lt;input type=&quot;password&quot; name=&quot;pwd&quot; id=&quot;pwd&quot; /&gt;    
&lt;/li&gt;    
&lt;li&gt;    
&lt;input type=&quot;submit&quot; value=&quot;登录&quot; /&gt;    
&lt;/li&gt;    
&lt;/ul&gt;    
&lt;/form&gt;    
&lt;/body&gt;    
&lt;/html&gt;    

（PHP页面：form.php）    

&lt;?php    
//非空验证 
if(empty($_POST[&#39;uname&#39;]) || empty($_POST[&#39;pwd&#39;]))    
{    
echo &#39;&lt;script type=&quot;text/javascript&quot;&gt;alert(&quot;用户名或密码为空!&quot;);&lt;/script&gt;&#39;;    
exit;    
}    
//验证密码 
if($_POST[&#39;uname&#39;] != &#39;jack&#39; || $_POST[&#39;pwd&#39;] != &#39;123456&#39;)    
{    
echo &#39;&lt;script type=&quot;text/javascript&quot;&gt;alert(&quot;用户名或密码不正确!&quot;);&lt;/script&gt;&#39;;    
exit;    
} else {    
echo &#39;&lt;script type=&quot;text/javascript&quot;&gt;alert(&quot;登录成功!&quot;);&lt;/script&gt;&#39;;    
exit;    
}

Nach dem Login kopieren

Zweiter Typ:

(HTML-Seite)

HTML CodeInhalt in die Zwischenablage kopieren

&lt;!DOCTYPE HTML&gt;    
&lt;html lang=&quot;en-US&quot;&gt;    
&lt;head&gt;    
&lt;meta charset=&quot;utf-8&quot;&gt;    
&lt;title&gt;iframe提交表单&lt;/title&gt;    
&lt;/head&gt;    
&lt;body&gt;    
&lt;iframe name=&quot;myiframe&quot; style=&quot;display:none;&quot; onload=&quot;iframeLoad(this);&quot;&gt;&lt;/iframe&gt;    
&lt;form action=&quot;form.php&quot; target=&quot;myiframe&quot; method=&quot;POST&quot;&gt;    
用户名:&lt;input type=&quot;text&quot; name=&quot;username&quot; /&gt;&lt;br/&gt;    
密 码:&lt;input type=&quot;password&quot; name=&quot;userpwd&quot; /&gt;&lt;br/&gt;    
&lt;input type=&quot;submit&quot; value=&quot;登录&quot; /&gt;    
&lt;/form&gt;    
&lt;script type=&quot;text/javascript&quot;&gt;    
function iframeLoad(iframe){    
var doc = iframe.contentWindow.document;    
var html = doc.body.innerHTML;    
if(html != &#39;&#39;){    
//将获取到的json数据转为json对象 
var obj = eval(&quot;(&quot;+html+&quot;)&quot;);    
//判断返回的状态 
if(obj.status &lt; 1){    
alert(obj.msg);    
}else{    
alert(obj.msg);    
window.location.href=&quot;http://www.baidu.com&quot;;    
}    
}    
}    
&lt;/script&gt;    
&lt;/body&gt;    
&lt;/html&gt;

Nach dem Login kopieren

(PHP-Seite: form.php)

XML/HTML-CodeKopieren Sie den Inhalt in die Zwischenablage

&lt;?php
//设置时区    
date_default_timezone_set(&#39;PRC&#39;);    
/*    
返回的提交消息    
status:状态    
msg:提示信息    
*/    
$msg = array(&#39;status&#39;=&gt;0,&#39;msg&#39;=&gt;&#39;&#39;);    
//获取提交过来的数据    
$name = $_POST[&#39;username&#39;];    
$pwd = $_POST[&#39;userpwd&#39;];    
//模拟登录验证    
$user = array();    
$user[&#39;name&#39;] = &#39;jack&#39;;    
$user[&#39;pwd&#39;] = &#39;jack2014&#39;;    
if($name != $user[&#39;name&#39;]){    
$msg[&#39;msg&#39;] = &#39;该用户未注册!&#39;;    
$str = json_encode($msg);    
echo $str;    
exit;    
}else if($pwd != $user[&#39;pwd&#39;]){    
$msg[&#39;msg&#39;] = &#39;输入的密码错误!&#39;;    
$str = json_encode($msg);    
echo $str;    
exit;    
}    
$msg[&#39;msg&#39;] = &#39;登录成功!&#39;;    
$msg[&#39;status&#39;] = 1;    
$str = json_encode($msg);    
echo $str;

Nach dem Login kopieren

Der obige Inhalt ist der relevante Inhalt, den der Editor Ihnen auf Basis von HTML vorstellt, um nach dem Absenden des Formulars keine Seitenaktualisierung zu erreichen nützlich für alle!

Verwandte Empfehlungen:

Eine Vielzahl von Beispielen zum Parsen von HTML-Formularen

Das obige ist der detaillierte Inhalt vonImplementierung einer HTML-basierten Implementierung ohne Aktualisierung der Seite nach der Formularübermittlung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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