时间戳

首页 > 解决方案 > 如何处理放置在不同脚本标签中的两个不同的ajax？

javascript - 如何处理放置在不同脚本标签中的两个不同的ajax？

问题描述

我有一个带有 3 个下拉列表和 1 个提交按钮的页面，在选择顶部下拉值时使用 ajax 自动填充。在使用提交按钮提交信息之后，为此，我在不同的脚本标签中编写了 ajax。

这里的问题是第一个 ajax 工作正常，但第二个 ajax 不工作，我知道不允许 2 ajax 调用。

我试图通过在同一页面上编写 PHP 来做到这一点，但在重新加载页面时，先前选择的信息会自动提交。

    <form style="margin: 10px 50px 10px 50px;" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="POST">
                      <div class="row">
                        <div class="col-md-12">
                          <div class="form-group">Book Name
                            <select class="form-control" id="sel_book">
                                <option value='0'>---Select---</option>
                                <?php
                                foreach($result as $key=>$rs):
                                {
                                ?>
                                    <option value="<?php $key; ?>"> <?php echo $rs[1];?> </option>
                                <?php
                                }
                                endforeach;
                                ?>
                            </select>
                          </div>
                        </div>
                      </div>

                      <div class="row" >
                        <div class="col-md-12" >
                          <div class="form-group">Member ID
                          <select class="form-control" id="sel_uid">

                          </select>
                          </div>
                        </div>
                      </div>


                      <div class="row" >
                        <div class="col-md-12" >
                          <div class="form-group">Member Name
                          <select class="form-control" id ="sel_uname">

                          </select>
                          </div>
                        </div>
                      </div>


                      <div class="row">
                        <div class="col-md-12">
                          <button class="btn btn-icon btn-3 btn-primary" id="accept">
                            <span class="btn-inner--icon"><i class="ni ni-user-run"></i></span>
                            <span class="btn-inner--text">Accept Return</span>
                          </button>
                        </div>
                      </div>
                    </form>



    <script>
        $(document).ready(function(){
            $("#sel_book").change(function(){
                var bid = $(this).val();
                bid = bid+1;
                //alert(bid);
                $.ajax({
                    url: 'get_user.php',
                    type: 'post',
                    data: {id:bid},
                    async: false,
                    dataType: 'json',
                    success:function(response){
                      $("#sel_uid").append("<option value='"+response.name+"'>"+response.name+"</option>");
                      $("#sel_uname").append("<option value='"+response.mname+"'>"+response.mname+"</option>");

                    }
                });
            });
        });
      </script>




    <script>
        $(document).ready(function(){
          $('#accept').click(function(e){
            var book = $("#sel_book :selected").text();
            var memberId = $("#sel_uid :selected").text();
            var memberName = $("#sel_uname :selected").text();
            var message = book+'\n'+memberId+'\n'+memberName;
            alert(message);
            e.preventDefalut();
            $.ajax({
              type:'post',
              url:'accept_return.php',
              async: false,
              data:{bname:book,memid:memberId,memname:memberName},
              dataType:'json',
              success:function(response){
                $("#final").text("Processing completed sucessfully");
              }
            });
          });
        });
        </script>

第二个脚本运行正常，但是没有对 PHP 页面进行 ajax 调用。

标签： javascriptphpajax

解决方案

<script>
        $(document).ready(function(){
            $("#sel_book").change(function(){
                var bid = $(this).val();
                bid = bid+1;
                //alert(bid);
                $.ajax({
                    url: 'get_user.php',
                    type: 'post',
                    data: {id:bid},
                    async: false,
                    dataType: 'json',
                    success:function(response){
                      $("#sel_uid").append("<option value='"+response.name+"'>"+response.name+"</option>");
                      $("#sel_uname").append("<option value='"+response.mname+"'>"+response.mname+"</option>");

                    }
                });
            });
        });
        
         $('#accept').click(function(e){
            var book = $("#sel_book :selected").text();
            var memberId = $("#sel_uid :selected").text();
            var memberName = $("#sel_uname :selected").text();
            var message = book+'\n'+memberId+'\n'+memberName;
            alert(message);
            e.preventDefalut();
            $.ajax({
              type:'post',
              url:'accept_return.php',
              async: false,
              data:{bname:book,memid:memberId,memname:memberName},
              dataType:'json',
              success:function(response){
                $("#final").text("Processing completed sucessfully");
              }
            });
          });
      </script>

嗨，您正面临这个问题，因为使用了两个准备好的文件。第一个准备好的文件工作正常，但第二个准备好无法识别。请把您的点击功能从任何准备好的文件中拿出来。请尝试使用如下的单个脚本。这可能会有所帮助

推荐阅读