jquery 简单 AJAX 代码不工作？

8aqjt8rx  于 2023-08-04  发布在  jQuery
关注(0)|答案(4)|浏览(111)
<form>
<input type="text" id="user"/>
<input type="button" value="Submit" onClick="post();" />
</form>

<div id="result"> </div>

<script type="text/javascript">
   function post()
   {
       var username = $('#user').val();
       $.post('battlephp.php',
       {postuser:user}
       )       
   }
</script>

字符串
一个简单的 AJAX 代码它应该接受用户名并显示PHP代码！但不知道为什么它不运行？？事实上我正在学习...所以我不能纠正错误或错误？？
我在localhost上运行ii。那么使用以下方法有什么问题吗：

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

型

jquery

4条答案

按热度按时间
w9apscun

w9apscun1#

显示PHP代码
不，不应该。
首先，您在脚本执行到一半时改变了对变量名的看法（user，username），因此您将抛出一个引用错误。
第二，您没有为$.post提供函数（第三个参数），所以您没有对返回的数据做任何事情（比如显示它）。
第三，服务器应该执行PHP并返回其输出。你不应该得到实际的PHP代码。

function post() {
   var username = $('#user').val();
   $.post(
     'battlephp.php',
     {postuser:username}, // Be consistent about your variable names
     function (data) {
        alert(data);
     }
   );       
}

字符串

赞(0）分享  回复(0）举报  2023-08-04
z9ju0rcb

z9ju0rcb2#

反而

document.ready()

字符串
你可以用

jQuery(function($){...});

型

赞(0）分享  回复(0）举报  2023-08-04
sgtfey8w

sgtfey8w3#

索引码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chennai</title>
  <script 
  src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script src="https://kit.fontawesome.com/68ee502f7d.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>

  <script>
$(document).ready(function() {
        $("#starting").change(function(){
            var id=$('#starting').val();
            {

            $.ajax({
                url:'drop.php',
                type:'post',
                data:{ending_id:id},
                success:function(data){
                    $("#ending").html(data);
                }
            })
        }
              })
            })
  </script>

</head>
<body>
<div class="container">
    <div class="row mt-5">
        <div class="col-md-4"></div>
        <div class="col-md-4">
            <h5 class="text-center text-capitalize">Transport form</h5>
            <form class="form" id="form" name="form" autocomplete="off">
            <input type="hidden" id="id" name="id" >

                <label for="name">
                    Name
                </label> 
                <input type="text" name="name" id="name" class="form-control name">      
                <label for="dob" class="mt-4">DOB</label>
                <input type="date" name="dob" class="form-control dob" id="dob">    
                <label class="mt-4" for="gender">Gender</label>
                <br>
                <input type="radio" class="gender" id="male" name="gender" value="male">
                <label for="male">Male</label> 
                <input type="radio"class="gender" id="female" name="gender" value="female">
                <label for="female">Female</label>
                <input type="radio" class="gender" id="others" name="gender" value="others">
                <label for="others">Others</label>
                <br>
<label for="phone" class="mt-4">Phone</label>
                <input type="text" class="form-control phone" id="phone" name="phone" maxlength="10">
                <label for="email" class="mt-4">Email</label>
                <input type="email" class="form-control email" id="email" name="email">
                <label for="starting" class="mt-4">From</label>
                <select name="starting" id="starting" name="starting" class="form-control starting">
                    <option value="">--select from--</option>
                    <?php
                    session_start();
                    require 'dbcon.php';
                    $sql = "select * from starting";
                    $result = pg_query($sql);
                    while ($row = pg_fetch_assoc($result)){ ?>
                    <option value="<?php echo $row['id']; ?>"><?php echo $row['starting_place'];?></option>
                    <?php
                    }
                    ?>
                </select>
                <label for="ending" class="mt-4">To</label>
                <select name="ending" id="ending" class="form-control ending">
                    <option value="">--select to--</option>
                </select>
                <button class="btn btn-success submit mt-4" name="submit" type="button" id="submit">Submit</button>
                <button class="btn btn-success mt-4" name="update" style="display:none;" type="button" id="update">Update</button>

            </form>
        </div>
    </div>
</div>
<div class="json-table container-fluid mt-5">
    <table class="table table-bordered text-center text-capitalize" id="table">
        <tr class="text-primary">
            <th>id</th>
            <th>Name</th>
            <th>Dob</th>
            <th>Gender</th>
            <th>Phone</th>
            <th>Email</th>
            <th>From</th>
            <th>To</th>
            <th>Edit</th>
            <th>Delete</th>
        </tr>
    </table>
</div>

<script>
        //regex code for text & number
 $(document).on('keyup blur','#name',function(){
 $(this).val( $(this).val().replace(/[^A-Za-z ]/g,'') ); 
});
$(document).on('keyup blur','#phone',function(){
    $(this).val($(this).val().replace(/[^0-9]/g, ''));
})

//On submit validation
$(document).on('click', "#submit", function() {
var Current_Field_id = $(this).attr('id');
try{
    if ($("#name").val().length == '') {
        throw {
            msg: "Enter your name",
            foc: "#name"
        }
    }
    if ($("#dob").val().length == '') {
        throw {
            msg: "Enter your date of birth",
            foc: "#dob"
        }
    }
if ($('input:radio[name=gender]:checked').length == 0)  {
        throw {
            msg: "select gender",
            foc: "#gender"
        }
    }

    if ($("#phone").val().length == '') {
        throw {
            msg: "Enter mobile number",
            foc: "#phone"
        }
    }

    if (!$('#phone').val().match('[6-9]{1}[0-9]{9}')) {

throw {
    msg: "Invald Mobileno",
    foc: "#phone"
}

}

if ($('#phone').val() === '6666666666' || $('#phone').val() === '7777777777'
|| $('#phone').val() === '8888888888' || $('#phone').val() === '9999999999') {
throw {
    msg: "Repated Numbers not allowed",
    foc: "#phone"
}
}

   if($('#email').val().length==""){
            throw{
                msg:'please enter email',
                foc:'#email'
            }
        }
        if(!$('#email').val().match(/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/)){
            throw {
                msg: "Enter valid Email",
                foc: "#email"
            }

        }
        if($('#starting').val().length==""){
            throw{
                msg: 'please choose From Place',
                foc: '#starting'
            }
        }
        if($('#ending').val().length==""){
            throw{
                msg: 'please choose To Place',
                foc: '#ending'
            }
        }

    $.ajax({
    url:'insert.php',
    type:'post',
    dataType:'html',
    data:$('#form').serialize(),
    success:function(s){
        alert(s);
    //   $('#data_table').load('#data_table');         
    }
  })
  
    return true;
}
catch(e){
    alert(e.msg);
    $(e.foc).focus();
} })
</script>

<!-- ajax fetch query -->

<script>
$(document).ready(function(){
$.ajax({
url:'fetch.php',
method:'post',
data:'json',
success:function(response){

  var data=JSON.parse(response);
  for(i in data){
    
     $("table").append( 
      "<tr id='"+data[i].id+"'><td>"+data[i].id+"</td>"
        +"<td>"+data[i].name+"</td>"
        +"<td>" +data[i].dob+"</td>"
        +"<td>" +data[i].gender+"</td>"
         +"<td>"+data[i].phone+"</td>"
         +"<td>" +data[i].email+"</td>"  
         +"<td>" +data[i].starting+"</td>" 
         +"<td>" +data[i].ending+"</td>"  
         +"<td>" +'<i class="fa-solid fa-pen-to-square text-warning" id="edit"></i>'+"</td>"  
         +"<td>" +'<i class="far fa-trash-alt text-danger remove" id="delete"></i>'+"</td></tr>"); 
        }       
  }
})
})

</script>

<!-- ajax delete query -->
<script>

 $(document).ready(function(){

$("#table").on('click','#delete',function(){
  var id = $(this).parents("tr").attr("id");

  if(confirm('Are you sure to remove this record ?'))
  { 
      $.ajax({
         url: 'delete.php',
         type: 'get',
         data: {id: id},
         error: function() {
            alert('Something is wrong');
         },
         success: function(data) {
            // alert(data)
              $("#"+id).remove();
              alert("Record removed successfully");  
         }
      });
 }
});
});

</script>

<!-- ajax edit -->
<script>

$(document).ready(function(){
$('#table').on('click','#edit',function(){
    var id = $(this).parents("tr").attr("id");

    if(confirm('Are you sure to edit this record ?'))
    { 
        $.ajax({
           url: 'edit.php',
           type: 'get',
           data: {id: id},
           error: function() {
              alert('Something is wrong');
           },
           success: function(response) {
             $('#submit').hide();
             $('#update').css('display','block');
            var data=JSON.parse(response);
            for(i in data){
               $('#id').val(data[i].id);
               $('#name').val(data[i].name);
               $('#dob').val(data[i].dob);
// gender edit
               if(data[i].gender=='male'){
                $("#male").prop("checked", true);
               }
               else if(data[i].gender=='female'){
                $("#female").prop("checked", true);
               }
               else{
                $("#other").prop("checked", true);
               }
// gender edit end
               $('#phone').val(data[i].phone);
               $('#email').val(data[i].email);
               $('#starting').val(data[i].starting);
            //    dependent edit
               $.ajax({
          url:'drop.php',
          type:'post',
          data:{ending_id:data[i].starting},
          success:function(res){
            $("#ending").html(res);//append option tag

               $('#ending').val(data[i].ending);

          }
        })
            }
            
}
        });

   }

})
 })

</script>

<!-- update ajax query -->

<script>
    $(document).ready(function(){
$('#update').click(function(){
    $.ajax({
    url:'update.php',
    type:'post',
    dataType:'html',
    data:$('#form').serialize(),
    success:function(s){
        alert(s);
      $('#form')[0].reset();  
      $('#submit').show();
      $('#update').css('display','none');         
    }
  });
});
});
</script>
</body>
</html>

字符串

赞(0）分享  回复(0）举报  2023-08-04
sdnqo3pr

sdnqo3pr4#

试着这样做：

<script>
    $(document).ready(function() {
        function post() {
            var username = $('#user').val();
            $.ajax({
                type : 'post',
                url : 'batttlephp.php',
                data : {
                    postuser : user
                },
                success : function(data) {
                    alert(data);
                },
                error : function(data) {
                    alert(data);
                }
            });
        });
    });
</script>

字符串
如果你正在做一个 AJAX 请求，那么也可以很好地处理成功和错误。我还建议你“开始文件”。
尝试上面的代码，让我们知道如果工作

赞(0）分享  回复(0）举报  2023-08-04
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com