0

フォームが送信されると、$_POSTを使用してそのフィールド値を取得できます。ただし、基本的なjQuery（プラグインなし）を使用して、空白のフィールドがあるかどうかを確認しようとしています。空白のフィールドがない場合にのみ、フォームのコンテンツを投稿したいと思います。

次のコードを試しましたが、jQueryで成功しましたが、唯一の問題は、jQueryで確認した後にフォームを投稿できないことです。jQueryの後に$_POSTに到達しません。

また、サーバーの応答をjQueryに戻すにはどうすればよいですか（サーバーエラーが発生したかどうかを確認するため）。これが私が試していることです：

HTML：

<form action="" id="basicform" method="post">
    <p><label>Name</label><input type="text" name="name" /></p>
    <p><label>Email</label><input type="text" name="email" /></p>  

    <input type="submit" name="submit" value="Submit"/>
</form>

jQuery：

jQuery('form#basicform').submit(function() {
    //code
    var hasError = false;

    if(!hasError) {
            var formInput = jQuery(this).serialize();
            jQuery.post(jQuery(this).attr('action'),formInput, function(data){

            //this does not post data
            jQuery('form#basicform').slideUp("fast", function() {
                    //how to check if there was no server error.
                });
            });
        }               
    return false;


});

PHP：

if(isset($_POST['submit'])){
    $name = trim($_POST['name'];
    $email = trim($_POST['email'];  

    //no any error
    return true;
}
4

3 に答える 3

1

質問に非常に具体的にするために：

サーバーの応答をjQueryに戻すにはどうすればよいですか（サーバーエラーがあったかどうかを確認するため）。これが私が試していることです：

jQuery-Ajaxを介したサーバー側の検証について話しているように聞こえます。

さて、あなたは必要です：

  • 変数のJavaScript値をPHPに送信します
  • エラーが発生していないか確認してください
  • 結果をJavaScriptに送り返す

だからあなたは言っている、

ただし、基本的なjQuery（プラグインなし）を使用して、空白のフィールドがあるかどうかを確認しようとしています。空白のフィールドがない場合にのみ、フォームのコンテンツを投稿したいと思います。

JavaScript / jQueryコード：

この例を見てください：

<script>
$(function()) {
    $("#submit").click(function() {
        $.post('your_php_script.php', {
             //JS Var   //These are is going to be pushed into $_POST
             "name"   : $("#your_name_field").val(),
             "email"  : $("#your_email_f").val()
        }, function(respond) {
           try {
               //If this falls, then respond isn't JSON 
               var result = JSON.parse(respond);

               if ( result.success ) { alert('No errors. OK')  }
           } catch(e) {
               //So we got simple plain text (or even HTML) from server
               //This will be your error "message" 
               $("#some_div").html(respond);
           }
       });
   });
}
</script>

さて、php1を見る時ではありません：

<?php

/**
 * Since you're talking about error handling
 * we would keep error messages in some array
 */

$errors = array();

function add_error($msg){
  //@another readers 
  //s, please don't tell me that "global" keyword makes code hard to maintain
  global $errors;
  array_push($errors, $msg);
}

/**
 * Show errors if we have any
 * 
 */
function show_errs(){
   global $errors;
   if ( !empty($errors) ){

     foreach($errors as $error){
        print "<p><li>{$error}</li></p>";
     }
     //indicate that we do have some errors:
     return false;
   }
  //indicate somehow that we don't have errors
  return true;
}



function validate_name($name){
  if ( empty($name) ){
     add_error('Name is empty');   
  }

  //And so on... you can also check the length, regex and so on
  return true;
}


//Now we are going to send back to JavaScript via JSON 

if ( show_errs() ){
   //means no error occured

   $respond = array();
   $respond['success'] = true;
   //Now it's going to evaluate as valid JSON object in javaScript
   die( json_encode($respond) );

} //otherwise some errors will be displayed (as html)
于 2012-09-03T11:25:04.743 に答える
1

それを行うには2つの方法があります

方法1：

実装に従って、使用しているinput[type="submit"]デフォルトの動作はフォームを送信することです。したがって、フォームを送信する前に検証を行う場合はpreventDefault()、その動作を行う必要があります

    jQuery('form#basicform').submit(function(e) {
        //code
e.preventDefault();
        var hasError = false;

        if(!hasError) {
                var formInput = jQuery(this).serialize();
                jQuery.post(jQuery(this).attr('action'),formInput, function(data){

                //this does not post data
                jQuery('form#basicform').slideUp("fast", function() {
                        //how to check if there was no server error.
                    });
                });
            }        
$(this).submit();       
        return false;


    });

方法2：

または、送信ボタンを単純なボタンに置​​き換えて、フォームを手動で送信することもできます。と$("yourFormSelector").submit();

送信ボタンをシンプルボタンに変更します

すなわち変更

<input type="submit" name="submit" value="Submit"/>

に

<input id="frmSubmit" type="button" name="submit" value="Submit"/>

そしてあなたのjQueryコードは

jQuery('input#frmSubmit').on('click',function(e) {
        //code
        var hasError = false;

        if(!hasError) {
                var formInput = jQuery(this).serialize();
                jQuery.post(jQuery(this).attr('action'),formInput, function(data){

                //this does not post data
                jQuery('form#basicform').slideUp("fast", function() {
                        //how to check if there was no server error.
                    });
                });
            }        
$("form#basicform").submit();       
        return false;


    });

サーバーから応答を取得するには、応答する必要がありechoます。

すべての変数が設定されている場合、それecho 1;以外の場合はecho 0。

   if(isset($_POST['submit'])){
        $name = trim($_POST['name'];
        $email = trim($_POST['email'];  
        echo 1;
    } else {
        echo 0;
    }

そして、あなたの成功のコールバック関数では、次のように$.post()処理します

jQuery.post(jQuery(this).attr('action'),formInput, function(data){
                //this does not post data
                jQuery('form#basicform').slideUp("fast",{err:data}, function(e) {
                        if(e.data.err==1){
                             alert("no error");
                        } else {
                             alert("error are there");
                    });
                });
于 2012-09-03T10:56:46.690 に答える
1

{"error": "1"}代わりに、サーバーのようなものをサーバーから返すこともでき{"error": "0"}ます（つまり、JSON応答にもっと読みやすいものを入れます）。に何かがあるので、これによりチェックが簡単になりますdata。

PHP：

if(isset($_POST['submit'])){
    $name = trim($_POST['name'];
    $email = trim($_POST['email'];  

    //no any error
    return json_encode(array("error" => 0));
} else {
    return json_encode(array("error" => 1));
}

JavaScript：

jQuery('input#frmSubmit').submit(function(e) {
        //code
        var hasError = false;

        if(!hasError) {
                var formInput = jQuery(this).serialize();
                jQuery.post(jQuery(this).attr('action'),formInput, function(data){
                var myData = data;

                if(myDate.error == 1) {//or "1"
                //do something here
                } else {
                //do something else here when error = 0
                }

                });
            }        
$("form#basicform").submit();       
        return false;


    });
于 2012-09-03T10:57:16.707 に答える