随身笔记

作者： admin

  • 基于jquery ajax中的data传递参数与后台工作的流程

    首先列出实例代码

    js代码：

    $('button').click(function(){
 var js2_101=30;
 $.ajax({
 type:'GET',
 url:"3.php",
 data:{text:js2_101},
 success: function(data){
 alert(data)
 }
 }); 
 return false;//阻止默认行为
 });

    HTML代码：

    <form method="get" action="3.php">
<button>测试</button>
</form>

     

    没阻止默认行为的时候：(服务器默认接受2次数据，一个是data传递的参数即使没有写也会传递一个空值，一个是表单提交的信息)
    data参数 和 input数据 如果提交的不一样 服务器接受2次不同的数据先接受data数据在接受input数据
    data参数 和 input数据 如果提交的一样 服务器接受2次同样的数据先接受data数据在接受input数据
    阻止默认行为时候：(服务器只接受一次数据，就是data传递的参数)
    input提交的信息只能传递给data,data才能发送给服务器，服务器也只能接收到data传来参数的数据。

    例子可以去《javascript和php变量相互赋值》下载，里面代码有注释。

  • jquery $.getJSON()跨域请求

    跨域案例下载：https://sdeno.com/?p=4815

    1，同一域名下和其他的请求可以是一样的 
    js: 

    复制代码代码如下:
    var url=”http://localhost:2589/a.ashx”;
    $(function(){
    $.getJSON(url,function(data){
    alert (data.Name);
    })
    });


    服务器返回字符串： 
    {“Name”:”loogn”,”Age”:23} 
    2，不同域名下 
    js: 

    复制代码代码如下:
    var url=”http://localhost:2589/a.ashx?callback=?”;
    $(function(){
    $.getJSON(url,function(data){
    alert (data.Name);
    })
    });


    服务器返回字符串： 
    jQuery1706543070425920333_1324445763158({“Name”:”loogn”,”Age”:23}) 
    返回的字符串就是一个调用一个叫“jQuery1706543070425920333_1324445763158” 的函数，参数是{“Name”:”loogn”,”Age”:23}。 
    其实这个很长的函数名是请求路径中callback=?的作用，我想应该是这样的：$.getJSON方法生成一个对回调方法的引用的名字，换掉？。上面请求会变成 
    http://localhost:2589/a.ashx?callback=jQuery1706543070425920333_1324445763158&_=1324445763194，所服务器回返json时要处理一下，如： 

    复制代码代码如下:
    string cb = context.Request[“callback”];
    context.Response.Write(cb + “(” + json + “)”);


    参数名callback也可换成jsoncallback,我想是怕冲突吧，jsoncallback应该优先检测，没有再检测callback(没测试！！) 
    ？也可是具体的函数名，这样回调函数就不能是匿名的了，用？生成只是jQuery为我们的一般操作提供的一个便利。

    http://www.jb51.net/article/29180.htm

  • javascript和php变量相互赋值

    关键词：JS PHP 变量 赋值

    php变量赋值给js：

    <script> //PHP变量能赋值给JS编程运算
<?php $m10=10; ?> //php的变量 $m10
var js10 = 10; //js变量 js10
var mun=<?php echo $m10 ?>; //php值赋值给js变量 mun
 document.write(js10+mun); //结果：php的值能赋值给JS变量，并且可以在JS程序中运用
</script>

    js变量赋值给php：

    js变量赋值给php，由于PHP是服务器语言要在后台运行，JS是客户端语言可以直接在浏览器上运行，所以js变量不能直接赋值给php，那么怎么样知道什么是服务器语言什么是客户端语言呢？其实查看网页的源代码我们会发现可以直接查看到JS的源代码而PHP的不能查看源代码只能把结果输出到页面上。为了实现这效果，这里使用ajax。

    流程：

    1，定义一个JS变量。

    2，将变量赋给data

    3，在将data的参数赋值给php变量

    这样就能达到js变量赋值给php的效果。

    关于ajax部分可以点击学习：https://sdeno.com/?s=ajax

    例如：

    JS部分：

    $('button').click(function(){
 var js2_101=30;
 $.ajax({
 type:'GET',
 url:"3.php",
 data:{text:js2_101},
 success: function(data){
 alert(data)
 }
 }); 
 return false;
 });

    PHP部分：

    $m2_10=$_GET['text'];
$php2=10;
echo $m2_10+$php2."<-----JS赋值给php，可以在PHP中进行编程";

    ajax_php

  • 锋利的jQuery基于ajax+PHP完成的聊天室案例

    ajax_

    锋利的jQuery基于ajax完成的聊天室案例。在网上搜索并没有很齐全的案例，有但是教程不具体加上自己也在学习ajax也顺便做一个简单的聊天室来帮助理解ajax。完成的大概思路如下：

    1，用户提交数据时，数据不会马上被服务器接受，而是需要data来获取用户提交的数据之后传给服务器，服务器才去获取data传来的数据。

    2，服务器获取到的数据要存入到数据库中，之后服务器还要将刚刚获取到的数据重新追加并更新输出最新的数据显示在页面上。

    3，服务器最新输出的数据将会被ajax获取并输出到客户端页面，从而达到局部刷新，更新数据的效果。

    jquery：

    <script>
$(function(){
 
 updata(); //加载页面默认运行
 $('button').click(function(){ //点击按钮触发
 
 if( $(':input').val()=='' ) {alert('数据不能为空，随便说点什么吧');return false;} //如果表单都是空 就禁止 只执行以下ajax 
 $.ajax({
 type:'POST', //表单以post发送给服务器，客户端就要以post接受
 url:'1.php', //向此页面索要信息
 data:$(':input').serialize(), //要向服务器提交的内容
 success: function(response,status,xhr){ //请求的内容成功执行以下代码
 $(':input[name=msg]').val(''); // 内容部分清空
 $('#load_msg2').text(''); //清空内容
 $('#load_msg2').append(response); //重新加载内容
 
 }
 });
 return false; //阻止表单默认跳转行为
 });
 
 
 function updata(){
 
 $('#load_msg').animate({scrollTop:$('#load_msg2').height()-$('#load_msg').height()}); //滚动条自动拉到底部
 $.ajax({
 type:'POST',
 url:"1.php",
 success: function(response,status,xhr){
 $('#load_msg2').text('');
 $('#load_msg2').append(response);
 
 }
 });
 
 }
 
 setInterval(updata,500);
 
 
});
</script>

    HTML：

    <div id="wrap">
 <div id="load_msg" style=" height:300px; overflow:scroll; overflow-x:hidden;">
 <div id="load_msg2"></div>
 </div>
 
 <br><br>
 <form method="post" action="1.php">
 姓名：<input type="text" name="name"><br><br>
 内容：<textarea name="msg" style="width:290px; height:150px;"></textarea><br><br>
 <button>提交内容</button>
 </form>
 (初次进入随便写点内容才能显示其他内容)
</div>

     

    http://pan.baidu.com/s/1dDcnCB3

  • 按钮的ajax请求时，一次点击两次提交的问题

    页面中的按钮的type是submit的： <input type=”submit” value=”Create” id=”submit” />

    ajax的请求，在JQuery中是：

    $(function () {
            $(‘#submit’).click(function () {
                var createGenreForm = $(‘#createGenreForm’);
                if (createGenreForm.valid()) {
                    var obj = {
                        Name: $(‘#Name’).val(),
                        Description: $(‘#Description’).val()
                    };
                    var jsonSerialized = JSON.stringify(obj);
                    $.ajax({
                        type: “POST”,
                        url: createGenreForm.attr(‘action’),
                        dataType: “json”,
                        contentType: “application/json; charset=utf-8”,
                        data: jsonSerialized,
                        success: function (result) {
                            alert(result.Message);
                        },
                        error: function (error) {
                            alert(“There was an error posting the data to the server: ” + error.responseText);
                        }
                    });
                }
            });

        });

    发生两次提交的原因是在执行完ajax请求后，并没有阻止submit的行为，所以解决方法有两种：

    1、不使用type为submit类型的按钮，而是使用type是button的按钮。

    2、在$(‘#submit’).click函数中，最后加一行return false;，即可阻止submit。

    一点说明：为什么在标题中要嵌入英文？原因是为了能够让国外的网友能查询到这篇文章。平常在Google上查资料的时候，经常参考国外网友的博客，帮助我解决了很多问题，所以我也想让他们能够参考我写的内容。当然文中我不可能全部译为英文，所以我尽量把代码粘全，靠代码说话吧。