zoukankan      html  css  js  c++  java

  • jsonp解决跨域,用div,css,js,jq实现textarea自适应高度

    1.请问用jsonp解决跨域的具体写法是什么？
    JSON 和 JSONP
    如果在同一个域下，$.ajax()方法只要设置 dataType 属性即可加载 JSON 文件。而在非
    同域下，可以使用 JSONP，但也是有条件的。

    //$.ajax()加载 JSON 文件
$.ajax({
type : 'POST',
url : 'test.json',
dataType : 'json',
success : function (response, status, xhr) {
alert(response[0].url);
}
});


    如果想跨域操作文件的话，我们就必须使用 JSONP。JSONP(JSON with Padding)是一个
    非官方的协议，它允许在服务器端集成 Script tags 返回至客户端，通过 javascript callback 的
    形式实现跨域访问（这仅仅是 JSONP 简单的实现形式）。

    //跨域的 PHP 端文件
<?php
$arr = array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
$result = json_encode($arr);
$callback = $_GET['callback'];
echo $callback."($result)";
?>
//$.getJSON()方法跨域获取 JSON
$.getJSON('http://www.li.cc/test.php?callback=?', function (response) {
console.log(response);
});
//$.ajax()方法跨域获取 JSON
$.ajax({
url : 'http://www.li.cc/test.php?callback=?',
dataType : 'jsonp',
success : function (response, status, xhr) {
console.log(response);
alert(response.a);
}
});

    2.编程   用div,css,js,jq实现textarea自适应高度

    文本框textarea高度随内容自适应增长收缩（js/jquery)textarea高度随内容自适应增长收缩

    方法一、

    1. <HTML>  
    2. <HEAD>  
    3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    4. <TITLE>枫芸志 &raquo; 文本框textarea高度自适应增长/伸缩</TITLE>  
    5. <style>  
    6. textarea { height:100px;  300px; }  
    7. </style>  
    8. </HEAD>  
    9. <BODY>  
    10. <!--以下代码中onpropertychange：IE支持；oninput：FireFox支持；为了兼容IE和FF，所以加上了这个两个；-->  
    11.     <textarea id="txtContent" rows="1" onpropertychange="ResizeTextarea()"  oninput="ResizeTextarea()" onkeyup="ResizeTextarea()">晴枫制作  
    12. </textarea>  
    13.     <script type="text/网页特效">  
    14.     // 最小高度  
    15.     var minHeight = 100;  
    16.     // 最大高度，超过则出现滚动条  
    17.     var maxHeight = 300;  
    18. function ResizeTextarea(){  
    19.   var t = document.getElementById('txtContent');  
    20.   h = t.scrollHeight;  
    21.   h = h > minHeight ? h : minHeight;  
    22.   h = h > maxHeight ? maxHeight : h;  
    23.   t.style.height = h + "px";  
    24. }  
    25. </script>  
    26. </BODY>  
    27. </HTML>  
    28.  

    方法二、

    1. <HTML>  
    2. <HEAD>  
    3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    4. <TITLE>枫芸志 &raquo; 文本框textarea高度自适应增长/伸缩</TITLE>  
    5. </HEAD>  
    6. <BODY>  
    7.     <textarea id="txtContent" rows="5" cols="50" onkeyup="ResizeTextarea()" style="overflow-y:hidden;">Textarea高度随内容自适应地增长，无滚动条  
    8. 晴枫制作  
    9. http://www.php230.com</textarea>  
    10.     <script type="text/javascript">  
    11.     // 最小高度  
    12.     var minRows = 5;  
    13.     // 最大高度，超过则出现滚动条  
    14.     var maxRows = 12;  
    15. function ResizeTextarea(){  
    16.   var t = document.getElementById('txtContent');  
    17.   if (t.scrollTop == 0) t.scrollTop=1;  
    18.   while (t.scrollTop == 0){  
    19.    if (t.rows > minRows)  
    20.     t.rows--;  
    21.    else 
    22.     break;  
    23.    t.scrollTop = 1;  
    24.    if (t.rows < maxRows)  
    25.     t.style.overflowY = "hidden";  
    26.    if (t.scrollTop > 0){  
    27.     t.rows++;  
    28.     break;  
    29.    }  
    30.   }  
    31.   while(t.scrollTop > 0){  
    32.    if (t.rows < maxRows){  
    33.     t.rows++;  
    34.     if (t.scrollTop == 0) t.scrollTop=1;  
    35.    }  
    36.    else{  
    37.     t.style.overflowY = "auto";  
    38.     break;  
    39.    }  
    40.   }  
    41. }  
    42. </script>  
    43. </BODY>  
    44. </HTML>  
    45.  

    jquery实现方法

      1. <head>  
      2. <title>jquery事件,动画1</title>  
      3. <style type="text/css教程">  
      4. <!--
      5. #Control  
      6. {  
      7. 100px;  
      8. background-color:Red;  
      9. margin:0;  
      10. cursor:pointer;  
      11. }  
      12. -->  
      13. </style>  
      14. <script src="/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>  
      15. <script type="text/javascript"><!--  
      16. $(function(){  
      17. var $Content=$("#content");  
      18. $("#big").bind("click",function(){  
      19. //判断big为span的标签是否正在进行动画效果  
      20. if(!$Content.is("animated"))  
      21. {  
      22. if($Content.height()<400)  
      23. {  
      24. //高度累加,隔0.4秒执行animate  
      25. $Content.animate({height:"+=50"},400)  
      26. }  
      27. }  
      28. });  
      29. $("#smalll").bind("click",function(){  
      30. if($Content.height()>50)  
      31. {  
      32. $Content.animate({height:"-=50"},400)  
      33. }  
      34. })  
      35. })  
      36.  
      37. // -->  
      38. </script>  
      39. </head>  
      40. <body>  
      41. <div id="v_show">  
      42. <div id="Control">  
      43. <span id="smalll">缩小</span>  
      44. <span id="big">放大</span>  
      45. </div>  
      46.  
      47. <div>  
      48. <textarea id="content" rows="8" cols="50">  
      49. fdafdsafsda  
      50. 。</textarea> 
  • 相关阅读:
    P1886 滑动窗口 单调队列
    用三维的视角理解二维世界：完美解释meshgrid函数，三维曲面，等高线，看完你就懂了。...
    用三维的视角理解二维世界：完美解释meshgrid函数，三维曲面，等高线，看完你就懂了。...
    SaltStack入门
    编写装饰器，为多个函数加上认证的功能（用户的账号密码来源于文件），要求登录成功一次，后续的函数都无需再输入用户名和密码
    time模块中time.time与time.sleep
    【函数篇】装饰器
    【函数篇】函数的进阶，名称空间、作用域、函数的嵌套、作用域链
    闭包！！！
    默认参数的陷阱
  • 原文地址：https://www.cnblogs.com/zhangzhaoyang/p/7778458.html
Copyright © 2011-2022 走看看