zoukankan      html  css  js  c++  java
  • php+ajax+jq

    1. <html
    2. <head
    3. <meta charset="UTF-8"
    4. <title>JQueryAjax+PHP</title
    5. <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script
    6. </head
    7. <body
    8.     用户名:<input type="text" id="username" name="username" /><br
    9.     密码:<input type="password" id="password" name="password" /><br
    10.     <button type="button" class="butn">ajax提交</button><br
    11.     <span class="con"></span
    12. <script type="text/javascript"
    13. $(document).ready(function(){ 
    14.     $(".butn").click(function(){ 
    15.         var username = $("#username").val(); 
    16.         var password = $("#password").val(); 
    17.         $.post('ajax.php',{name:username,pwd:password},function(data) { 
    18.             alert(data); 
    19.             $(".con").html(data); 
    20.         }) 
    21.     }) 
    22. }) 
    23. </script
    24. </body
    25. </html
    <html>
    <head>
    <meta charset="UTF-8">
    <title>JQueryAjax+PHP</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    </head>
    <body>
        用户名:<input type="text" id="username" name="username" /><br>
        密码:<input type="password" id="password" name="password" /><br>
        <button type="button" class="butn">ajax提交</button><br>
        <span class="con"></span>
    <script type="text/javascript">
    $(document).ready(function(){
        $(".butn").click(function(){
            var username = $("#username").val();
            var password = $("#password").val();
            $.post('ajax.php',{name:username,pwd:password},function(data) {
                alert(data);
                $(".con").html(data);
            })
        })
    })
    </script>
    </body>
    </html>

    ajax.php:

    1. ajax.php 
    2. <?php  
    3. echo '用户名:',$_POST['name'],',密码:',$_POST['pwd']."<br>"; 
    4. //这里可以进行一些操作,比如数据库交互 
    5.  
    6.  
    7. echo "操作完毕"; 
    8. ?> 
    ajax.php
    <?php 
    echo '用户名:',$_POST['name'],',密码:',$_POST['pwd']."<br>";
    //这里可以进行一些操作,比如数据库交互
    
    
    echo "操作完毕";
    ?>
    

    在非json格式下,后台只能返回字符串,如果想后台返回数组,可以采用json格式

    例如将JQueryAjax中的代码修改为如下形式:

    1. <html
    2. <head
    3. <meta charset="UTF-8"
    4. <title>JQueryAjax+PHP</title
    5. <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script
    6. </head
    7. <body
    8.     用户名:<input type="text" id="username" name="username" /><br
    9.     密码:<input type="password" id="password" name="password" /><br
    10.     <button type="button" class="butn">ajax提交</button><br
    11.     <span class="con"></span
    12. <script type="text/javascript"
    13. $(document).ready(function(){ 
    14.     $(".butn").click(function(){ 
    15.         var username = $("#username").val(); 
    16.         var password = $("#password").val(); 
    17.         $.ajax({ 
    18.              url: "ajax.php",   
    19.              type: "POST", 
    20.              data:{name:username,pwd:password}, 
    21.              dataType: "json", 
    22.              error: function(){   
    23.                  alert('Error loading XML document');   
    24.              },   
    25.              success: function(data,status){//如果调用php成功  
    26.                 alert(status); 
    27.                 alert(data); 
    28.                 $('.con').html("用户名:"+data[0]+"密码:"+data[1]); 
    29.              } 
    30.         }); 
    31.     }) 
    32. }) 
    33. </script
    34. </body
    35. </html
    <html>
    <head>
    <meta charset="UTF-8">
    <title>JQueryAjax+PHP</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    </head>
    <body>
        用户名:<input type="text" id="username" name="username" /><br>
        密码:<input type="password" id="password" name="password" /><br>
        <button type="button" class="butn">ajax提交</button><br>
        <span class="con"></span>
    <script type="text/javascript">
    $(document).ready(function(){
        $(".butn").click(function(){
            var username = $("#username").val();
            var password = $("#password").val();
            $.ajax({
                 url: "ajax.php",  
                 type: "POST",
                 data:{name:username,pwd:password},
                 dataType: "json",
                 error: function(){  
                     alert('Error loading XML document');  
                 },  
                 success: function(data,status){//如果调用php成功 
                    alert(status);
                    alert(data);
                    $('.con').html("用户名:"+data[0]+"密码:"+data[1]);
                 }
            });
        })
    })
    </script>
    </body>
    </html>
  • 相关阅读:
    团队项目第二阶段冲刺第六天
    团队项目冲刺第二阶段第五天
    团队项目冲刺第二阶段第四天
    团队项目冲刺第二阶段第三天
    大道至简阅读笔记1
    团队项目冲刺第二阶段第二天
    团队项目第二阶段冲刺第一天
    团队项目冲刺第九天
    团队项目冲刺第八天
    团队项目冲刺第七天
  • 原文地址:https://www.cnblogs.com/KLYY/p/6509255.html
Copyright © 2011-2022 走看看