ajaxによるチェックフォーム方式での投稿
2022-01-18 05:18:27
この例では、参考までに投稿時にフォームをチェックするためのajaxメソッドを以下のように共有しています。
方法1.
コード例です。
巧妙なデザイン:ajaxが送信された場合、インターセプトを確認することはできませんが、決定するためにフラグを設定し、非常に巧妙なデザインなので、収集する!(1)
function inserts(){
var flag = checkForm();
if (flag == false) {
return;
}
$.ajax({
// A few parameters to note
type: "POST",// method type
dataType: "json",//the type of data expected to be returned by the server
url: "<%=path %>/soldier/inserts",//url
data: $('#form1').serialize(),
success: function (data) {
alert(data.msg);
window.location.reload(true);
},
error : function() {
alert(data.msg);
}
});
}
function checkForm(){
var name = $("#name").val();
if (name.trim() == '') {
alert("Please enter a name! ");
$("#name").focus();
return false;
}
var sex = $("#sex").val();
if (sex.trim() == '') {
alert("Please enter gender! ");
$("#sex").focus();
return false;
} else if (sex.trim() ! = 'male' && sex.trim() ! = 'female') {
alert("Please enter a legal gender! ");
$("#sex").val('');
$("#sex").focus();
return false;
}
var age = $("#age").val();
if (age.trim() == '') {
alert("Please enter age! ");
$("#age").focus();
return false;
}else if(age.trim()==0 || age.trim()<=0 || age.trim()>150){
alert("Please enter a legal age! ");
$("#age").focus();
return false;
}
var politics_sstatus = $("#politics_sstatus").val();
if (politics_sstatus.trim() == '') {
alert("Please enter political status! ");
$("#politics_sstatus").focus();
return false;
}
var tel = $("#tel").val();
if (tel.trim() == '') {
alert("Please enter a contact number! ");
$("#tel").focus();
return false;
}else if(tel.length<11 || tel.length>11){
alert("Please enter a legitimate contact number! ");
$("#tel").focus();
return false;
}
var id_card = $("#id_card").val();
if (id_card.trim() == '') {
alert("Please enter ID number! ");
$("#id_card").focus();
return false;
}else if(id_card.length<18 ||id_card.length>18){
alert("Please enter a legal ID number! ");
$("#id_card").focus();
return false;
}
var appeal = $("#appeal").val();
if (appeal.trim() == '') {
alert("Please enter the main claim! ");
$("#appeal").focus();
return false;
}
return true;
}
ページの効果です。
方法2
これは、ログインのためのajaxチェックサムです
コード例です。
ページの送信ボタンです。
<input type="button" id="loginsubmit" value="login" />
jsのロジックです。
解析する。ユーザーがボタンをクリックすると
<script type="text/javascript">
var redirectUrl = "${redirect}";
var LOGIN = {
/*
3. Perform account password verification
*/
checkInput:function() {
if ($("#loginname").val() == "") {
alert("Username cannot be empty");
$("#loginname").focus();
return false;
}
if ($("#nloginpwd").val() == "") {
alert("Password cannot be empty");
$("#nloginpwd").focus();
return false;
}
return true;
},
/*
4. Login
1. Background check when the account password check is not empty
*/
doLogin:function() {
$.post("/user/login", $("#formlogin").serialize(),function(data){
if (data.status == 200) {
alert("Logged in successfully! ");
if (redirectUrl == "") {
location.href = "http://localhost:8082";
} else {
location.href = redirectUrl;
}
} else {
alert("Login failed due to:" + data.msg);
$("#loginname").select();
}
});
},
/*
2. Perform login verification
*/
login:function() {
if (this.checkInput()) {
this.doLogin();
}
}
};
/*
1. Check the data of the form when the page is initialized
1. When the user clicks on the login, bind a click event
2. Call the LOGIN object's login method to verify the account password
*/
$(function(){
$("#loginsubmit").click(function(){
LOGIN.login();
});
});
</script>
レンダリング
以上が今回の記事の内容ですが、皆様の学習の一助となり、スクリプトハウスをより一層応援していただければ幸いです。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
AJAXを使ったファイルのアップロード
-
AJAXは、省、市、郡レベルの連携効果を実現するために
-
ajax インターフェース文書の URL パスの省略の例
-
ユーザー名の存在を確認するためのAjaxメソッド
-
ユーザー名が占有されているかどうかを検出するためにAjaxを使用する完全な例
-
ajax post download flaskのファイルストリームと中国語のファイル名の問題
-
Ajaxファイルアップロード機能(Spring MVC)
-
Ajax共通パッケージングライブラリ-Axiosの利用について
-
react axiosの1つまたは複数のドメインへのクロスドメインアクセス問題
-
ajaxを使ったSpring Bootベースの画像アップロード