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; width: 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. width: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> 
posted @ 2017-11-03 15:33  张朝阳的博客  阅读(336)  评论(0)  编辑  收藏  举报