Contoh terperinci pemalam jQuery Mockjax yang mensimulasikan request

Contoh terperinci pemalam jQuery Mockjax yang mensimulasikan request_jquery Ajax

WBOY

Lepaskan： 2016-05-16 15:20:37

asal

1265 orang telah melayarinya

1. Prinsip

jquery-mockjax digunakan untuk mengejek data pemulangan permintaan ajax bahagian hadapan ke latar belakang.

Prinsipnya sangat mudah

Letakkan titik putus dalam kod js anda di mana anda ingin menghantar permintaan ajax, dan kemudian bandingkan nilai $.ajax.toString() dalam kes [memperkenalkan jquery-mockjax] dan [tanpa memperkenalkan jquery-mockjax] .

Jelas sekali, apabila jquery-mockjax diperkenalkan, perpustakaan olok-olok ini akan menggantikan fungsi ajax yang disediakan oleh jquery. Ini menjadikannya mudah untuk diejek.

Dalam proses pembangunan sebenar, bahagian hadapan dan bahagian belakang merundingkan antara muka bersatu, dan kemudian masing-masing memulakan tugas mereka sendiri. Pada masa ini, saya mempunyai permintaan Ajax sedemikian yang perlu mendapatkan data dari latar belakang:

$.ajax({
url: '/products/'
}).done(function(res) {
$('#result').html(res);
});

Salin selepas log masuk

Tetapi perkhidmatan ini mungkin belum dibuat lagi Mungkin lelaki yang membangunkan bahagian belakang (lelaki kacak yang menggunakan PHP, Ruby, .NET, GoldFusion, dll.) telah meninggalkan, atau mungkin dia sibuk dengan perkara lain. Bagaimanapun, apabila permintaan ini dibuat saya tidak mendapat hasil yang saya inginkan, saya hanya mendapat ralat 404 (Tidak Ditemui).

Ini benar-benar teruk, dan desakan tidak berguna. Penguji di sebelah saya mendesak untuk mengujinya, dan saya tidak sabar-sabar untuk melihat keputusan segera. Pada masa ini, anda hanya boleh bergantung pada diri sendiri Salah satu kaedah yang lebih baik adalah untuk mensimulasikan permintaan Ajax Di sini saya menggunakan pemalam jQuery Mockjax.

Alamat: jQuery Mockjax

Ini ialah pemalam jQuery Apabila anda memuat turun dan memetiknya, letakkannya selepas jQuery:

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="result"></div>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="vendor/jquery.mockjax.js"></script>
</body>
</html>

Salin selepas log masuk

Kemudian laksanakan kod untuk mensimulasikan permintaan sebelum kod permintaan, gunakan kaedah $.mockjax() yang disediakan oleh pemalam dan nyatakan buat sementara waktu dua parameter url dan responseText:

$.mockjax({
url: '/products/',
responseText: 'Here you are!'
});

Salin selepas log masuk

Ia akan memantau permintaan Ajax dengan URL yang sama dan memintas serta mensimulasikan respons apabila permintaan itu dikeluarkan Nilai responseText ialah kandungan respons yang disimulasikan, supaya program saya dapat dilaksanakan dengan gembira ialah 'Di sini anda berada' Kandungan ini akan dipaparkan dalam div#result. Apabila saya tidak perlu lagi mengejek permintaan itu, saya boleh menggunakan kaedah $.mockjax.clear() untuk mengosongkannya:

$.mockjax.clear();

Setelah pembangunan perkhidmatan latar belakang selesai, saya boleh menggunakan kaedah ini untuk mengosongkan semua permintaan simulasi dan mengalami kesan permintaan sebenar. Jika anda tidak mahu mengosongkan semua permintaan simulasi sekaligus, tetapi sebaliknya menyasarkan permintaan simulasi tertentu, anda boleh memasukkan ID permintaan simulasi dan setiap permintaan simulasi akan mengembalikan nilai ID:

var idOne = $.mockjax({ }),
idTwo = $.mockjax({ });
$.mockjax.clear(idTwo);

Salin selepas log masuk

Ini mengosongkan permintaan simulasi kedua dan mengekalkan yang pertama.

Memandangkan alamat url permintaan Ajax mesti sepadan dengan url permintaan simulasi, dengan mengandaikan terdapat banyak permintaan pada halaman, ia akan menjadi sangat menyakitkan untuk mensimulasikan setiap permintaan, Nasib baik, parameter url pemalam menyediakan kad bebas * Kaedah:

$.mockjax({
url: '/books/*'
});

Salin selepas log masuk

Selain memadankan permintaan dengan alamat url /books/cook, anda juga boleh memadankan permintaan dengan alamat /books/math dan banyak lagi. Anda juga boleh menggunakan ungkapan biasa untuk corak padanan yang lebih kompleks:

$.mockjax({
url: /^\/data\/(cook|math)$/i
});

Salin selepas log masuk

Gunakan parameter data pemalam untuk melaksanakan respons simulasi yang berbeza berdasarkan data permintaan yang berbeza:

$.mockjax({
url: '/books/',
data: {
type: 'cook'
},
responseText: 'You want a cook book!'
});
$.mockjax({
url: '/books/',
data: {
type: 'math'
},
responseText: {
"content": "You want a math book!"
}
});

Salin selepas log masuk

Walaupun untuk alamat URL yang sama, kandungan respons yang diperoleh adalah berbeza apabila data yang diminta berbeza. Selain rentetan teks biasa, kandungan respons juga boleh menggunakan json
Format rentetan.

Pemalam juga menyediakan objek tetapan parameter lalai $.mockjaxSettings yang tidak dinyatakan akan menggunakan nilai lalai ini:

$.mockjaxSettings = {
logging: true,
status: 200,
statusText: "OK",
responseTime: 500,
isTimeout: false,
throwUnmocked: false,
contentType: 'text/plain',
response: '',
responseText: '',
responseXML: '',
proxy: '',
proxyType: 'GET',
lastModified: null,
etag: '',
headers: {
etag: 'IJF@H#@923uf8023hFO@I#H#',
'content-type' : 'text/plain'
}
};

Salin selepas log masuk

Selepas mengubah suai nilai lalai, permintaan simulasi seterusnya akan menggunakan nilai yang diubah suai:

$.mockjaxSettings.contentType = "application/json";

Salin selepas log masuk

Hanya nilai lalai ContentType diubah suai di sini.

Di atas menerangkan pengetahuan berkaitan pemalam jQuery Mockjax untuk mensimulasikan permintaan Ajax melalui contoh.