简单的线索游戏AJAX PHP MYSQL检查和跟踪

Question

I am trying to work on expanding my knowledge and wanted to tackle something different/outside my comfort area. I'd like to try out a clue game of 3 clues.

What I CAN do is submit the form to the database(PHP) to check if the entry is correct(I'm a php guy).

What I'd like to figure out is how to test that for each clue without having to reload the page.

After it has been determined correct I want an image to change next to it from a temp image to an image representing the clue for example.

This is what I'm trying to do in image form and below are my questions.

1. The lanugage to check the database is AJAX, correct?
2. What would change the image or div contents next to the input of clue 1?
3. What would have to happen for clue 2 to also have the ability to be checked? A new script for a separate form or is there a reset that doesn't bother the previous entry?

Does anyone know of something like this or similar I can view as a reference(or jsfiddle)?

Answer 1

Your answer is too broad, so I'll put up hints that you can use:

1) Partially, it has got nothing to do with the database, that's PHP's job. What it actually does is to load the data from the server without a page refresh. All about it here.

2) Since I do JavaScript only through jQuery, so you would need to have the jQuery library included for the following:

• First of all it depends on which event you want the AJAX to take place on. If you have a button which the user clicks after entering the clue to check, then you use the click function on the button like in here.

• Once the click is detected, pass your textbox value (and maybe also your image id) to AJAX and have it check at server side whether the values are incorrect.

  • If incorrect, pass an error message.
  • If correct, pass a success message and also the new image

3) There are several ways you can do this:

     A. Have all your 3 clues boxes loaded in same page but the 2nd and 3rd hidden and shown only if the previous clue is correct. You can do this on the AJAX's success function.

     B. If you need more security, you can have the next clue HTML sent from your PHP and use append() to add it to a container.

Have a look at the demo here (without AJAX) - DEMO