在同一页面 php 上处理 2 个 ajax 帖子，两个 ajax 帖子都发布到同一页面，帖子中没有 url

问题描述 投票：0回答：1

我需要处理同一页面上的 2 个帖子来处理 2 个不同的 php 代码。

验证所有字段是否具有有效数据后的第一个 POST 这将启用另一个块，这里在新块中将有更多输入，在启用第二个块之后我需要第二个 POST，第二个 POST 就是我所在的位置挣扎我无法得到第二个 POST 的回声。

就像有 2 个表单，在同一页面上提交 form1 后，这会启用一个新表单（form2），然后验证来自第二个 ajax post 的 form 2 数据，我将使用第二个 Post 的数据执行一个 php 函数。

我确实有 2 个表单作为正确的 html，但是 form2 总是被提交，即使总是提交防止默认表单，这在我的页面上造成了很多冲突。

        <html>
          <header>

              <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> 
     </script>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
    </script>

      </header>

   <body>

<div class="container">
 <div class="row justify-content-md-center alternate-background">
  <main class="col-12 col-md-10 col-lg-8">
    <h1 class="form-signin-heading mt-4 mb-3 alternate-background"> Llene los 2 campos para validar sus numero de cliente y rif</h1>
   
          <div id="test" style="hide"></div>
            <form  method="post" id="a">
               <div class="form-group">
                   <input type="text" class="form-control" name="bookId" id="bookId" value="">
                   <input type="text" class="form-control" name="book" id="book" value="">
               </div>
               <div class="modal-footer">
                   <button type="submit" class="btn btn-block" name="validate" id="validate">Update</button>
               </div>
           </form>
        </main>
      </div>
    </div>



    

      <?php 
      //error_reporting ( E_ALL );                                       
     //ini_set ( 'display_errors', 1 ); 
     //if( isset($_POST['ajax1']) && isset($_POST['bookId']) ){
      if (isset($_POST['bookId'])) {
      if (empty(trim($_POST['bookId'])) || empty(trim($_POST['book'])) ) {
       echo 'Some fields are empty. the post came empty';
      } 
    else {  
                               
      $projectid = $_POST['bookId'];    
      $projecti = $_POST['book'];   
    echo $projectid;
     echo $projecti;    
      echo '
      <div class="container">
    <div class="row justify-content-md-center alternate-background">
      <main class="col-12 col-md-10 col-lg-8">
  
  <h1 class="form-signin-heading mt-4 mb-3 alternate-background"> porfavor crear su usuario y contraseña</h1>
   <form  method="post" id="a2">
  <div class="row mb-3">
      <label id="username-label" class="col-form-label col-12 col-md-4 text-md-right text-md-end">Usuario *</label>

      <div class="col-12 col-md-8">
        <span id="usernameCheck" class="small"></span>
        <input type="text" class="form-control" id="username" name="username" placeholder="Usuario" value="" required="" autofocus="" autocomplete="username">
      </div>
    </div>
    
    <div class="row mb-3">
      <label for="fname" id="fname-label" class="col-form-label col-12 col-md-4 text-md-right text-md-end">Nombre *</label>
      <div class="col-12 col-md-8">
        <input type="text" class="form-control" id="fname" name="fname" placeholder="Nombre" value="" required="" autofocus="" autocomplete="given-name">
      </div>
    </div>
    
    <div class="col-12 col-md-8 offset-md-4">
      <div class="submit btn btn-primary "  id="registerUser">
        <span class="fa fa-user-plus mr-2 me-2"></span> Registrarse          </div>
          </div>
   </form >
    </main>
    </div>
    </div>
   ';
    }

        }
     else {
        
        //echo "both must be filled";
    }
    
      if (isset($_POST['username'])) {

     $projecx = $_POST['username']; 
    $projecxx = $_POST['fname'];    
      echo $projecx;
     echo $projecxx;        
     // show the data   
      }
     ?>




          <script type="text/javascript">
   $("#registerUser").click(function(){
      var usernn = $("#username").val();
        var usernnn = $("#fname").val();
    console.log( usernn);
      console.log( usernnn);
          jQuery.ajax({
            type: "POST",
            data: { username: usernn, fname: usernnn }
              /*
            success: function(data){
               jQuery(".res").html(data);

             $("#test").html(data);
            console.log(data);

            }*/
            });

               });

           $("#validate").click(function(){
          console.log("The paragraph was clicked.");
           var unc = $("#bookId").val();
              var rif = $("#book").val();
       
            jQuery.ajax({
            type: "POST",
            data: {bookId: unc, book: rif }
             
            success: function(data){
               jQuery(".res").html(data);

             $("#test").html(data);

            }
            });
            
    
            
                     });





                     </script>
                  </body>
                   </html>
php jquery ajax post
1个回答
0
投票

请将

$("#registerUser").click(function(){....})
动作放在系统将显示容器的块内。

这样系统在渲染容器块时，可以正确地链接到点击动作。

所以，请根据您的代码修改如下，看看效果：

<html>
<header>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
        </script>

          </header>

<body>
    
    <div class="container">
     <div class="row justify-content-md-center alternate-background">
      <main class="col-12 col-md-10 col-lg-8">
        <h1 class="form-signin-heading mt-4 mb-3 alternate-background"> Llene los 2 campos para validar sus numero de cliente y rif</h1>
       
              <div id="test" style="hide"></div>
                <form  method="post" id="a">
                   <div class="form-group">
                       <input type="text" class="form-control" name="bookId" id="bookId" value="">
                       <input type="text" class="form-control" name="book" id="book" value="">
                   </div>
                   <div class="modal-footer">
                       <button type="submit" class="btn btn-block" name="validate" id="validate">Update</button>
                   </div>
               </form>
            </main>
          </div>
        </div>
 

    
<?php   
    if (isset($_POST['bookId'])) {
          if (empty(trim($_POST['bookId'])) || empty(trim($_POST['book'])) ) {
           echo 'Some fields are empty. the post came empty';
          } else {  
                                   
          $projectid = $_POST['bookId'];    
          $projecti = $_POST['book'];   
          echo $projectid;
          echo $projecti;   
          echo '
          <div class="container">
        <div class="row justify-content-md-center alternate-background">
          <main class="col-12 col-md-10 col-lg-8">
      
      <h1 class="form-signin-heading mt-4 mb-3 alternate-background"> porfavor crear su usuario y contraseña</h1>
       <form  method="post" id="a2">
      <div class="row mb-3">
          <label id="username-label" class="col-form-label col-12 col-md-4 text-md-right text-md-end">Usuario *</label>

          <div class="col-12 col-md-8">
            <span id="usernameCheck" class="small"></span>
            <input type="text" class="form-control" id="username" name="username" placeholder="Usuario" value="" required="" autofocus="" autocomplete="username">
          </div>
        </div>
        
        <div class="row mb-3">
          <label for="fname" id="fname-label" class="col-form-label col-12 col-md-4 text-md-right text-md-end">Nombre *</label>
          <div class="col-12 col-md-8">
            <input type="text" class="form-control" id="fname" name="fname" placeholder="Nombre" value="" required="" autofocus="" autocomplete="given-name">
          </div>
        </div>
        
        <div class="col-12 col-md-8 offset-md-4">
          <div class="submit btn btn-primary "  id="registerUser">
            <span class="fa fa-user-plus mr-2 me-2"></span> Registrarse          </div>
              </div>
       </form >
        </main>
        </div>
        </div>
       ';
?>
<script> 

$("#registerUser").click(function(){
alert('ok');

var usernn = $("#username").val();
var usernnn = $("#fname").val();
alert( usernn);
alert( usernnn);

//PLEASE put other code here 

                 });
               </script>
<?php
        }
      } else {          
            //echo "both must be filled";
        }
        
if (isset($_POST['username'])) {
    
         $projecx = $_POST['username']; 
        $projecxx = $_POST['fname'];    
          echo $projecx;
         echo $projecxx;        
         // show the data   
          }
         ?>
    
  
  <script type="text/javascript">

    
               $("#validate").click(function(){
              console.log("The paragraph was clicked.");
               var unc = $("#bookId").val();
                  var rif = $("#book").val();
           
                jQuery.ajax({
                type: "POST",
                data: {bookId: unc, book: rif }
                 
                success: function(data){
                   jQuery(".res").html(data);

                 $("#test").html(data);

                }
                });
                
                              });

                         </script>
                      </body>
                       </html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.