-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1406 lines (689 loc) · 49.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<html class="theme-next pisces use-motion" lang="zh-Hans">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />
<link href="/css/main.css?v=5.1.0" rel="stylesheet" type="text/css" />
<meta name="keywords" content="Hexo, NexT" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.1.0" />
<meta name="description" content="自由和孤独才是人最终的归宿">
<meta property="og:type" content="website">
<meta property="og:title" content="我是TcV587">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="我是TcV587">
<meta property="og:description" content="自由和孤独才是人最终的归宿">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="我是TcV587">
<meta name="twitter:description" content="自由和孤独才是人最终的归宿">
<script type="text/javascript" id="hexo.configurations">
var NexT = window.NexT || {};
var CONFIG = {
root: '/',
scheme: 'Pisces',
sidebar: {"position":"left","display":"post","offset":12,"offset_float":0,"b2t":false,"scrollpercent":false},
fancybox: true,
motion: true,
duoshuo: {
userId: '6317505429219837000',
author: '英俊潇洒的Tc大大'
},
algolia: {
applicationID: '',
apiKey: '',
indexName: '',
hits: {"per_page":10},
labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
}
};
</script>
<link rel="canonical" href="http://yoursite.com/"/>
<title> 我是TcV587 </title>
</head>
<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">
<div class="container one-collumn sidebar-position-left
page-home
">
<div class="headband"></div>
<header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
<div class="header-inner"><div class="site-brand-wrapper">
<div class="site-meta ">
<div class="custom-logo-site-title">
<a href="/" class="brand" rel="start">
<span class="logo-line-before"><i></i></span>
<span class="site-title">我是TcV587</span>
<span class="logo-line-after"><i></i></span>
</a>
</div>
<p class="site-subtitle">想把你写成一首歌想养一只猫</p>
</div>
<div class="site-nav-toggle">
<button>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
</button>
</div>
</div>
<nav class="site-nav">
<ul id="menu" class="menu">
<li class="menu-item menu-item-home">
<a href="/" rel="section">
<i class="menu-item-icon fa fa-fw fa-home"></i> <br />
首页
</a>
</li>
<li class="menu-item menu-item-categories">
<a href="/categories" rel="section">
<i class="menu-item-icon fa fa-fw fa-th"></i> <br />
分类
</a>
</li>
<li class="menu-item menu-item-archives">
<a href="/archives" rel="section">
<i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
归档
</a>
</li>
<li class="menu-item menu-item-tags">
<a href="/tags" rel="section">
<i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
标签
</a>
</li>
<li class="menu-item menu-item-about">
<a href="/about" rel="section">
<i class="menu-item-icon fa fa-fw fa-user"></i> <br />
关于
</a>
</li>
</ul>
</nav>
</div>
</header>
<main id="main" class="main">
<div class="main-inner">
<div class="content-wrap">
<div id="content" class="content">
<section id="posts" class="posts-expand">
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/12/07/一句话/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Tc">
<meta itemprop="description" content="">
<meta itemprop="image" content="/uploads/avatar.jpg">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="我是TcV587">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2017/12/07/一句话/" itemprop="url">
三句话
</a>
</h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2017-12-07T23:33:52+08:00">
2017-12-07
</time>
</span>
<span class="post-comments-count">
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-comment-o"></i>
</span>
<a href="/2017/12/07/一句话/#comments" itemprop="discussionUrl">
<span class="post-comments-count ds-thread-count" data-thread-key="2017/12/07/一句话/" itemprop="commentCount"></span>
</a>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h2 id="1"><a href="#1" class="headerlink" title="1"></a>1</h2><p>如果成长的代价是愈发沉默，我可不可以选择一睡不醒。<br>至少那样还能回到有你的日子。</p>
<h2 id="2"><a href="#2" class="headerlink" title="2"></a>2</h2><p>越来越不喜欢说话，越来越不主动，越来越像自己曾经最讨厌的模样。</p>
<h2 id="3"><a href="#3" class="headerlink" title="3"></a>3</h2><p>连第三句话，也懒得说了。就这样吧，有什么是不能接受的呢。</p>
</div>
<div>
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/10/27/浅谈Ajax请求的contentType/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Tc">
<meta itemprop="description" content="">
<meta itemprop="image" content="/uploads/avatar.jpg">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="我是TcV587">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2017/10/27/浅谈Ajax请求的contentType/" itemprop="url">
浅谈Ajax请求的contentType
</a>
</h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2017-10-27T22:34:40+08:00">
2017-10-27
</time>
</span>
<span class="post-comments-count">
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-comment-o"></i>
</span>
<a href="/2017/10/27/浅谈Ajax请求的contentType/#comments" itemprop="discussionUrl">
<span class="post-comments-count ds-thread-count" data-thread-key="2017/10/27/浅谈Ajax请求的contentType/" itemprop="commentCount"></span>
</a>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<blockquote>
<p>在今天开发的过程中，遇到一个问题，困扰了我半天。还什么问题能为难到英明伟岸阳光乐观积极开朗的Tc？哼，不怕告诉你，多的去了。。。<br>ok，开场尬演之后，我们进入正题。没错，这次我们要讨论的，是ajax请求里的contentType。<br>什么是contentType，它是用来干嘛的，怎么用，下面将一层一层脱下它的内啊呸，外衣！</p>
</blockquote>
<h1 id="1-什么是contentType"><a href="#1-什么是contentType" class="headerlink" title="1. 什么是contentType"></a>1. 什么是contentType</h1><p>在介绍contentType之前，要先说说ajax请求。（这里就不科普ajax正确读音了，和wifi一样，顺口就行）</p>
<blockquote>
<h2 id="Ajax"><a href="#Ajax" class="headerlink" title="Ajax"></a><strong>Ajax</strong></h2><p>（异步JavaScript和XML）Asynchronous JavaScript + XML, 其本身不是一种新技术，而是一个在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法, 包括: HTML or XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, 以及最重要的 XMLHttpRequest object.当使用结合了这些技术的AJAX模型以后， 网页程序能够逐步快速地将更新呈现在用户界面上，不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。——form <a href="https://developer.mozilla.org/zh-CN/docs/AJAX" target="_blank" rel="external">MDN Web Docs</a></p>
</blockquote>
<p>简单点说，就是使用 XMLHttpRequest 对象与服务器通信。 它可以使用JSON，XML，HTML和文本等多种格式发送和接收。AJAX最吸引人的就是它的“异步”特性，也就是说他可以在不重新刷新页面的情况下与服务器通信，交换数据，更新页面。</p>
<h1 id="2-Ajax能干什么"><a href="#2-Ajax能干什么" class="headerlink" title="2. Ajax能干什么"></a>2. Ajax能干什么</h1><p>你可以使用AJAX最主要的两个特性做下列事：</p>
<blockquote>
<p>1.在不重新加载页面的情况下发送请求给服务器。<br>2.接受并使用从服务器发来的数据。</p>
</blockquote>
<p>OK,这里不深入讨论ajax了，有兴趣的老铁可以去<a href="https://developer.mozilla.org/zh-CN/docs/AJAX/Getting_Started" target="_blank" rel="external">MDN</a> 进行深入学习了解。</p>
<h1 id="3-Ajax请求参数介绍"><a href="#3-Ajax请求参数介绍" class="headerlink" title="3. Ajax请求参数介绍"></a>3. Ajax请求参数介绍</h1><p>接下来正式介绍ajax请求所需参数：</p>
<blockquote>
<ol>
<li><p><code>url</code>:<br>要求为String类型的参数，（默认为当前页地址）发送请求的地址。</p>
</li>
<li><p><code>type</code>:<br>要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但有部分浏览器不支持。</p>
</li>
<li><p><code>data</code>:<br>要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看下面的<code>processData</code>选项。对象必须为<code>key/value</code>格式，例如<code>{foo1:"bar1",foo2:"bar2"}</code>转换为<code>&foo1=bar1&foo2=bar2</code>。如果是数组，JQuery将自动为不同值对应同一个名称。例如<code>{foo:["bar1","bar2"]}</code>转换为<code>&foo=bar1&foo=bar2</code>。</p>
</li>
<li><p><code>timeout</code>:<br>要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。</p>
</li>
<li><p><code>async</code>:<br>要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。</p>
</li>
<li><p><code>cache</code>:<br>要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。</p>
</li>
<li><p><code>dataType</code>:<br>要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：<br><code>xml</code>：返回XML文档，可用JQuery处理。<br><code>html</code>：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。<br><code>script</code>：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。<br><code>json</code>：返回JSON数据。<br><code>jsonp</code>：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。<br><code>text</code>：返回纯文本字符串。</p>
</li>
<li><p><code>beforeSend</code>：<br>要求为Function类型的参数，发送请求前可以修改<code>XMLHttpRequest</code>对象的函数，例如添加自定义HTTP头。在<code>beforeSend</code>中如果返回false可以取消本次ajax请求。<code>XMLHttpRequest</code>对象是惟一的参数 function(XMLHttpRequest){</p>
<pre><code> this; //调用本次ajax请求时传递的options参数
}
</code></pre></li>
<li><p><code>complete</code>：<br>要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：<code>XMLHttpRequest</code>对象和一个描述成功请求类型的字符串。</p>
<pre><code>function(XMLHttpRequest, textStatus){
this; //调用本次ajax请求时传递的options参数
}
</code></pre></li>
<li><p><code>success</code>：<br>要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。</p>
<pre><code>(1)由服务器返回，并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //调用本次ajax请求时传递的options参数
}
</code></pre></li>
<li><p><code>error</code>: 要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：<br> function(XMLHttpRequest, textStatus, errorThrown){</p>
<pre><code>//通常情况下textStatus和errorThrown只有其中一个包含信息
this; //调用本次ajax请求时传递的options参数
</code></pre><p> }</p>
</li>
<li><p><code>contentType</code>： 要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为<code>"application/x-www-form-urlencoded"</code>。该默认值适合大多数应用场合。</p>
</li>
<li><p><code>dataFilter</code>：<br>要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。</p>
<pre><code>function(data, type){
//返回处理后的数据
return data;
}
</code></pre></li>
<li><p><code>dataFilter</code>：<br>要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。<code>data</code>是Ajax返回的原始数据，<code>type</code>是调用jQuery.ajax时提供的<code>dataType</code>参数。函数返回的值将由jQuery进一步处理。</p>
<pre><code>function(data, type){
//返回处理后的数据
return data;
}
</code></pre></li>
<li><p><code>global</code>：<br>要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，<code>ajaxStart</code>或<code>ajaxStop</code>可用于控制各种ajax事件。</p>
</li>
<li><p><code>ifModified</code>：<br>要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。</p>
</li>
<li><p><code>jsonp</code>：<br>要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在<code>"callback=?"</code>这种GET或POST请求中URL参数里的”callback”部分，例如<code>{jsonp:'onJsonPLoad'}</code>会导致将<code>"onJsonPLoad=?"</code>传给服务器。</p>
</li>
<li><p><code>username</code>：<br>要求为String类型的参数，用于响应HTTP访问认证请求的用户名。</p>
</li>
<li><p><code>password</code>：<br>要求为String类型的参数，用于响应HTTP访问认证请求的密码。</p>
</li>
<li><p><code>processData</code>： 要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型<code>"application/x-www-form-urlencoded"</code>。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。</p>
</li>
<li><p><code>scriptCharset</code>： 要求为String类型的参数，只有当请求时dataType为”jsonp”或者”script”，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。</p>
</li>
</ol>
</blockquote>
<p>OK,赋值粘贴也是挺累的。<br>看完上面这些东西，相信你也已经睡着了。那么现在我们来个实际例子提提神。<br>我今天遇到的情况，是这样的。<br>我要提交一个请求，需要传的参数是这样的：</p>
<pre><code>var perParams = {
"appId": app_id,
"pes": thisArr
};
</code></pre><p>其中thisArr是一个数组对象，格式如下：</p>
<pre><code>[
{
"faceId": "RECHARGE.GET_PHONE_NO_PROVINCE",
"funCode": "*"
},
{
"faceId": "RECHARGE.GET_PHONE_NO_PROVINCE",
"funCode": "PAYEASY222"
}
]
</code></pre><p>也就是说，总的参数，应该是下面这个样子的：</p>
<pre><code>{
"appId": "F0AE8FFE78CE41C7B1A19E7CEF442A15",
"pes": [
{
"faceId": "RECHARGE.GET_PHONE_NO_PROVINCE",
"funCode": "*"
},
{
"faceId": "RECHARGE.GET_PHONE_NO_PROVINCE",
"funCode": "PAYEASY222"
}
]
}
</code></pre><p>共有两个参数，整个参数是一个复杂对象，对象嵌数组。<br>那么问题来了，在http 请求中，get 和 post 是最常用的。在 jquery 的 ajax 中， contentType都是默认的值：<code>application/x-www-form-urlencoded</code>，这种格式的特点就是，name/value 成为一组，每组之间用 & 联接，而 name与value 则是使用 = 连接。如： <code>www.qq.com/q?key=abc&value=123</code>这是get , 而 post 请求则是使用请求体，参数不在 url 中，在请求体中的参数表现形式也是<code>key=abc&value=123</code>的形式。一般情况下这样是没什么问题的，因为参数结构简单，没有嵌套：</p>
<pre><code>{
a:1,
b:2,
c:3
}
</code></pre><p>而我们上面要传的不是简单的JSON结构而是下面这种复杂的结构：</p>
<pre><code>{
param1: value1,
param2: [
{x: 1,y:2},
{x: 3,y:4}
]
}
</code></pre><p>这个复杂对象， application/x-www-form-urlencoded 这种形式是没有办法将复杂的 JSON 组织成键值对形式(当然也有方案这点可以<a href="https://stackoverflow.com/questions/6243051/how-to-pass-an-array-within-a-query-string" target="_blank" rel="external">参考</a> ) ,你传进去可以发送请求，但是服务端收到数据为空， 因为 ajax 没有办法知道怎样处理这个数据。<br><img src="leanote://file/getImage?fileId=59f3228aab6441174c001f28" alt="传到后台的参数"><br>如果图片挂了，看这里：</p>
<pre><code>{
param1:value1,
param2[0][x]:1,
param2[0][y]:2,
param2[1][x]:3,
param2[1][y]:4,
}
</code></pre><p>发现没有，本来的一个JSON对象两个参数，变成了不伦不类的多个参数，那该怎么办？</p>
<hr>
<p>这个时候，我们发现http还可以自定义数据类型。上面也介绍了，ajax的contentType是设置的http的请求头，这个头的目的是告诉服务器端，我的请求参数是什么格式的数据，你要按照对应的格式去处理。<br>而默认的请求头是 <code>"application/x-www-form-urlencoded;charset=UTF-8"</code>，也就是普通的表单提交的格式。它是不支持复杂json字符串的。如果需要后台成功接受并解析我们的参数，我们可以采用可以解析json格式的请求头，即<code>"application/json"</code>,这样服务端可以直接拿到一个json请求参数，而不是一个一个的key value。<br>那么事情也就简单了，只需要在ajax请求里把contentType设置成：<code>'application/json'</code>，然后把参数用<code>JSON.stringify()</code>格式化，就可以正常传到后台并接受啦。</p>
<hr>
<p>问题又来了，为什么要把参数用<code>JSON.stringify()</code>格式化呢。先说说<code>JSON.stringify()</code>的作用：把一个对象解析为json字符串。通过对参数用<code>typeof()</code>比较我们知道，它是一个参数对象，直接传过去，后台会将它解析成键值对的形式，比如这样：<code>params1=value1&params2%5B0%5D%5Bx%5D=1&pparams2%5B0%5D%5By%5D=2&params2%5B1%5D%5Bx%5D=3&params2%5B1%5D%5By%5D=4</code>,而这样后台接受不了。因此必须用<code>JSON.stringify()</code>解析成</p>
<pre><code>{
param1: value1,
param2: [
{x: 1,y:2},
{x: 3,y:4}
]
}
</code></pre><p>这样，我们就可以传复杂的对象参数给后台，后台接到然后用 <code>JSON.parse</code>还原就行啦。 进行还原就行能顺利接受~</p>
</div>
<div>
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/10/26/fku/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Tc">
<meta itemprop="description" content="">
<meta itemprop="image" content="/uploads/avatar.jpg">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="我是TcV587">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2017/10/26/fku/" itemprop="url">
fku
</a>
</h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2017-10-26T23:39:08+08:00">
2017-10-26
</time>
</span>
<span class="post-comments-count">
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-comment-o"></i>
</span>
<a href="/2017/10/26/fku/#comments" itemprop="discussionUrl">
<span class="post-comments-count ds-thread-count" data-thread-key="2017/10/26/fku/" itemprop="commentCount"></span>
</a>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<p>zzzz</p>
</div>
<div>
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/10/26/发布、更新、撤销一个npm包/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Tc">
<meta itemprop="description" content="">
<meta itemprop="image" content="/uploads/avatar.jpg">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="我是TcV587">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2017/10/26/发布、更新、撤销一个npm包/" itemprop="url">
发布、更新、撤销一个npm包
</a>
</h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2017-10-26T23:09:31+08:00">
2017-10-26
</time>
</span>
<span class="post-comments-count">
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-comment-o"></i>
</span>
<a href="/2017/10/26/发布、更新、撤销一个npm包/#comments" itemprop="discussionUrl">
<span class="post-comments-count ds-thread-count" data-thread-key="2017/10/26/发布、更新、撤销一个npm包/" itemprop="commentCount"></span>
</a>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<blockquote>
<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>上次说写一个发布npm包的文章，结果又偷懒拖了不知道多少天……这次趁着有那份心，一次性把这些天遇到的问题踩的坑给填了。</p>
</blockquote>
<h1 id="1-发布一个npm包"><a href="#1-发布一个npm包" class="headerlink" title="1. 发布一个npm包"></a>1. 发布一个npm包</h1><p>有一说一，在学会发布之前，觉得发布<code>npm</code>包是一件很难很高大上的事情，觉得如果学会了会很了不起。等到自己亲自踩完这个坑之后，才发现并没有什么了不起的，没让我长高没让我变帅，更没让我脱单，这让我很是惆怅。言归正传，下面先来介绍下什么<code>npm</code>。</p>
<h2 id="什么是npm"><a href="#什么是npm" class="headerlink" title="什么是npm"></a>什么是npm</h2><p>来自<a href="https://www.npmjs.com/" target="_blank" rel="external">官网</a>的说明：</p>
<blockquote>
<p>npm is the package manager for JavaScript and the world’s largest software registry. Discover packages of reusable code — and assemble them in powerful new ways.</p>
</blockquote>
<p>大白话解释：</p>
<blockquote>
<p>NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：</p>
<ul>
<li>允许用户从NPM服务器下载别人编写的第三方包到本地使用。</li>
<li>允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。</li>
<li>允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。</li>
</ul>
</blockquote>
<p>在这里额外介绍下<code>cnpm</code>。由于天朝国情，国内访问国外的网站可能经常失败，而cnpm，顾名思义，<code>china npm</code>,通俗理解，就是’中国版’npm。因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，所以淘宝团队干了件大好事。来自官网：“这是一个完整<code>npmjs.org</code>镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”<br>官方网址：<code>https://npm.taobao.org</code>。<br>安装方式：命令行执行<code>npm install cnpm -g --registry=https://registry.npm.taobao.org</code><br>安装完后最好查看其版本号(执行<code>cnpm -v</code>)或关闭命令提示符重新打开，安装完直接使用有可能会出现错误<br>注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm。</p>
<h2 id="怎么发布npm包"><a href="#怎么发布npm包" class="headerlink" title="怎么发布npm包"></a>怎么发布npm包</h2><p>说完什么是npm，接下来就来讲讲怎么发布一个npm应用。我这里已经默认有了npm应用。</p>
<h3 id="首先，注册一个npm账号"><a href="#首先，注册一个npm账号" class="headerlink" title="首先，注册一个npm账号"></a>首先，注册一个npm账号</h3><p>因为你的包是要放在npm上的，所以，没有npm的账号，什么事都干不了。<br>在npm上注册一个账号是很简单的，去<a href="https://www.npmjs.com/" target="_blank" rel="external">官网</a>填一下用户名密码邮箱，然后人家就会发个邮件给你，没什么比如海底电缆突然爆炸之类的意外的话，很快就注册成功了。这个是我注册后的样子：<br><img src="leanote://file/getImage?fileId=59f1c596ab644170ce001d8d" alt=""><br>有了账号以后，我们就可以进行发布更新等操作啦。</p>
<h3 id="正式发布"><a href="#正式发布" class="headerlink" title="正式发布"></a>正式发布</h3><p>上面偷偷摸摸水了这么多字，是不是结果感觉什么都没讲一样。哈哈不急，现在开始。</p>
<blockquote>
<h2 id="npm-init"><a href="#npm-init" class="headerlink" title="npm init"></a>npm init</h2></blockquote>
<p>首先打开cmder(上篇文章提到过的，一个很好用的命令行工具)，通过cd 命令进入一个文件夹。我这里直接进入桌面上的一个第三方穿梭框插件文件夹了。如图：<br><img src="leanote://file/getImage?fileId=59f1c596ab644170ce001d8f" alt=""></p>
<blockquote>
<p>然后执行<code>npm init</code>，初始化。</p>
</blockquote>
<p><img src="leanote://file/getImage?fileId=59f1c596ab644170ce001d8e" alt=""></p>
<p>接下来它会问你一些问题，这些问题都是要发布的npm包信息。</p>
<ul>
<li>name : 填写你要发布的包名字，默认是所在文件夹的名字。不过这里要着重说一下，最好先去npm上找一下有没有同名的包。最好的测试方式就是，在命令行里面输入<code>npm install 你要发布的包名</code>，如果报错，那么很好，npm上没有跟你同名的包，你可以放心大胆地把包发布出去。如果成功下载下来了，emMmmmm，换个包名吧老铁。</li>
<li>version : 你要发布的包的版本，默认是1.0.0</li>
<li>description : 你要发布的包的描述，用简短的语言告诉大家你的包是干嘛的。</li>
<li>entry point : 入口文件，一般默认是<code>index.js</code>，可以自定义。</li>
<li>test command : 测试命令，这里直接回车就好，暂时不需要。</li>
<li>git repository : 你的git仓库项目地址，如果你的包是先放到github上或者其他git仓库里，这时候你的文件夹里面会存在一个隐藏的.git目录，npm会读到这个目录作为这一项的默认值。如果没有的话，直接回车继续。</li>
<li>keyword：关键词，这个也很重要，因为它关系到有多少人会搜到你的npm包。尽量使用贴切的关键字作为这个包的索引。</li>
<li>author ： 不用多说，包的作者。</li>
<li>license ： 开源协议，直接回车或者写某个协议。<br>然后它就会问你<code>Are you ok?</code>，如图：<br><img src="leanote://file/getImage?fileId=59f1c596ab644170ce001d90" alt=""></li>
</ul>
<p>回车或者输入y，就ok~<br>这时候我们回到文件目录里面，发现多出来一个package.json文件，里面就是我们刚刚输入的信息。<br><img src="leanote://file/getImage?fileId=59f1ca42ab64416e8b001f0b" alt=""></p>
<p>PS：最好，写好README.md，一个给大家描述你的包的markdown文件，如果大家都不知道你的代码是做什么的，会有人去下载你的代码吗？并且最好写英文。</p>
<blockquote>
<p>到这里，初始化就完成了，接下来， 登录npm账号。</p>
</blockquote>
<p> <img src="leanote://file/getImage?fileId=59f1ca42ab64416e8b001f0e" alt=""></p>
<p> 如果你发现password是空的话，别怕，命令行输入密码是不会显示的<br> 这里要说明下，第一次登录是执行<code>npm adduser</code>命令，然后同样是输入账号密码邮箱。</p>
<blockquote>
<p>接下来，正式发布，<code>npm publish</code><br><img src="leanote://file/getImage?fileId=59f1ca42ab64416e8b001f0c" alt=""></p>
</blockquote>
<p>如果像上图那样显示,恭喜你，发布成功！</p>
<blockquote>
<p>接下来我们看看刚刚发布的包<br>我们去可以去官网搜索（该带梯子的请自带梯子），或者打开一个新的文件夹，执行<code>npm install 包名</code>,能下载下来就说明发布成功了~</p>
</blockquote>
<p><img src="leanote://file/getImage?fileId=59f1ca42ab64416e8b001f0d" alt=""></p>
<h1 id="2-撤销一个包"><a href="#2-撤销一个包" class="headerlink" title="2. 撤销一个包"></a>2. 撤销一个包</h1><p>首先说明下，取消发布包可能并不像你想象得那么容易，这种操作是受到诸多限制的，撤销发布的包被认为是一种不好的行为。（试想一下假设你发布的包已经在社区内有了一定程度的影响，这时候你撤销了，这对那些已经深度使用并依赖你发布的包的团队是件多么崩溃的事情！）<br>撤销步骤：</p>
<blockquote>
<p>输入 <code>npm unpublisj 包名</code>来撤销发布</p>
</blockquote>
<ol>
<li>根据规范，只有在发包的24小时内才允许撤销发布的包（ <code>unpublish is only allowed with versions published in the last 24 hours</code>）</li>
<li>即使你撤销了发布的包，发包的时候也不能再和被撤销的包的名称和版本重复了（即不能名称相同，版本相同，因为这两者构成的唯一标识已经被“占用”了）</li>
<li>推荐用：<code>npm deprecate <pkg>[@<version>] <message></code>代替<code>npm unpublish</code>。<br>使用这个命令，不会撤销你已有的包，但会在他人尝试安装这个包的时候得到警告<br>例如：<code>npm deprecate penghuwanapp '别下这个包，它的老板带着小姨子跑了~'</code></li>
</ol>
<h1 id="3-更新你的包-版本控制"><a href="#3-更新你的包-版本控制" class="headerlink" title="3. 更新你的包(版本控制)"></a>3. 更新你的包(版本控制)</h1><p>当我们修改了包，该怎么更新进行版本控制呢？<br>npm有一套自己的版本控制标准——Semantic versioning（语义化版本），如下：<br>对于<code>"version":"x.y.z"</code></p>
<ol>
<li><strong>修复bug,小改动，增加z</strong></li>
<li><strong>增加了新特性，但仍能向后兼容，增加y</strong></li>
<li><strong>有很大的改动，无法向后兼容,增加x</strong></li>
</ol>
<p>通过<code>npm version <update_type></code>可以自动改变版本<br><code>update_type</code>为<code>patch</code>, <code>minor</code>, or <code>major</code>其中之一，分别表示补丁，小改，大改。<br>或者直接修改<code>package.json</code>里面的版本号，然后<code>npm publish</code>也可以。</p>
<pre><code>后记
其实等自己真正把整个流程走一次，会发现这是件很容易的事情。世上无难事，只要肯放弃啊呸，只要不放弃。
然后我们发布的包，一般放在类git工具上托管，便于开发。有机会再写一篇通过github进行开发的文章。
</code></pre>
</div>
<div>
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>