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>
  • 相关阅读:
    SpannaleString总结
    【未完成】bug记录2013427>import工程时出现Build path contains duplicate entry:'src' for project 'XXX'
    【未完成】给eclipse项目改名
    android创建和删除桌面快捷方式
    bug记录2013426（2）>Select at least one project错误
    hosts配置
    获取当前应用的版本号及android系统版本号及手机型号
    转载:如何将offcie 2003文档（.doc、.xls、.ppt）转换成mht文档
    转载：.NET2.0 验证控件常用的正则表达式
    转载: RESTORE DATABASE命令还原SQLServer 2005 数据库
  • 原文地址：https://www.cnblogs.com/KLYY/p/6509255.html
Copyright © 2011-2022 走看看